option 配置详解

2025年2月25日大约 6 分钟

基本配置项类型

text 文本

{
  "type": "text",
  "name": "标题",
  "default": "默认内容"
}

字段名	含义	类型	默认值	是否必选	备注
type	text	string	-	是	-
name	显示标签	string	-	是	-
default	默认值	string \|string[]	-	否	-
placeholder	输入框占位文本	string	-	否	-
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top
rows	输入框行数	number	1	否	-
multiple	是否为数组	boolean	false	否	-
add	是否允许添加元素	boolean	false	否	-
remove	是否允许添加删除	boolean	false	否	-

注意

multiple 为 true 时，default 必须为数组，反之为字符串。
只有 multiple 为 true 时，配置 add 和 remove 才能生效。

number 数值

{
  "type": "number",
  "name": "年龄",
  "default": 20,
  "max": 100,
  "min": 0
}

字段名	含义	类型	默认值	是否必选	备注
type	number	string	-	是	-
name	显示标签	string	-	是	-
default	默认值	number\|number[]	-	否	-
placeholder	输入框占位文本	string	-	否	-
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top
min	最小值	number	-	否	-
max	最大值	number	-	否	-
step	步长	number	-	否	设置步长后只能输入 step 的倍数
multiple	是否为数组	boolean	false	否	-
add	是否允许添加元素	boolean	false	否	-
remove	是否允许添加删除	boolean	false	否	-

select 下拉选择框

{
  "type": "select",
  "name": "对齐方式",
  "default": "center",
  "placeholder": "请选择",
  "options": [
    {
      "name": "左",
      "value": "left"
    },
    {
      "name": "中",
      "value": "center"
    },
    {
      "name": "右",
      "value": "right"
    }
  ]
}

字段名	含义	类型	默认值	是否必选	备注
type	select	string	-	是
name	显示标签	string	-	是
default	默认值	string	-	否
placeholder	输入框占位文本	string	请选择	否
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top
multiple	是否多选	boolean	false	否
clearable	是否可以清空选项	boolean	false	否
options	下拉框选项	array	[]	是	[{name: ‘’ ,value: ‘’}]

radio 单选框

{
  "type": "radio",
  "name": "字体粗细",
  "default": 1,
  "options": [
    {
      "name": "正常",
      "value": 1
    },
    {
      "name": "加粗",
      "value": 2
    }
  ]
}

字段名	含义	类型	默认值	是否必选	备注
type	radio	string	-	是	-
name	显示标签	string	-	是	-
default	默认值	string	-	否	-
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top
options	选项	array	[]	是	[{name: ‘’ ,value: ‘’}]
isButton	是否为按钮组	boolean	false	否	-

checkbox 多选框

{
  "type": "checkbox",
  "name": "字体样式",
  "default": 1,
  "options": [
    {
      "name": "加粗",
      "value": 1
    },
    {
      "name": "倾斜",
      "value": 2
    }
  ]
}

字段名	含义	类型	默认值	是否必选	备注
type	checkbox	string	-	是	-
name	显示标签	string	-	是	-
default	默认值	string	[]	否	-
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top
options	选项	array	[]	是	[{name: ‘’ ,value: ‘’}]
isButton	是否为按钮组	boolean	false	否	-

switch 开关

{
  "type": "switch",
  "name": "是否显示",
  "default": true
}

字段名	含义	类型	默认值	是否必选	备注
type	switch	string	-	是	-
name	显示标签	string	-	是	-
default	默认值	string	-	否	-
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top
activeValue	打开的值	boolean / string / number	true	否	-
inactiveValue	关闭的值	boolean / string / number	false	否	-
activeText	打开时的文字描述	string	-	否	-
inactiveText	关闭时的文字描述	string	-	否	-

slider 滑块

{
  "type": "slider",
  "name": "滑块",
  "default": 2,
  "min": 0,
  "max": 10,
  "showInput": true,
  "units": "px"
}

字段名	含义	类型	默认值	是否必选	备注
type	slider	string	-	是	-
name	显示标签	string	-	是	-
default	默认值	{value:number,unit:string}\|number	-	否	当单位为数组时 default 为对象
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top
max	最大值	number	-	否	-
min	最小值	number	-	否	-
step	步长	number	1	否	-
showInput	是否显示输入框	boolean	false	否	-
units	单位	array	string	-	否

color 颜色选择器

{
  "type": "color",
  "name": "背景颜色",
  "default": "#333",
  "showAlpha": true
}

字段名	含义	类型	默认值	是否必选	备注
type	color	string	-	是	-
name	显示标签	string	-	是	-
default	默认值	string\|string[]	-	否	-
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top
multiple	是否为数组	boolean	false	否	-
add	是否允许添加元素	boolean	false	否	-
remove	是否允许添加删除	boolean	false	否	-

image 图片

{
  "type": "image",
  "name": "图片"
}

字段名	含义	类型	默认值	是否必选	备注
type	image	string	-	是	从素材库中选择图片
name	显示标签	string	-	是	-
default	默认值	string	-	否
labelWidth	表单域标签的宽度	string	68px	否	-
labelPosition	表单域标签的位置	string	top	否	left/top

hidden 隐藏配置项

{
  "type": "hidden",
  "default": "id"
}

字段名	含义	类型	默认值	是否必选	备注
type	hidden	string	-	是	编辑器不会配置此字段
name	显示标签	string	-	否	-
default	默认值	string	-	否	设置默认不显示的值，但是会作为 config 传给方法

高级配置项类型

tab 左侧竖向标签页

{
  "type": "tab",
  "name": "标题",
  "icon": "el-icon-edit-outline",
  "props": {
    "name": {
      "type": "text",
      "name": "标题名称"
    }
  }
}

字段名	含义	类型	默认值	是否必选	备注
type	tab	string	-	是	解析为左侧竖向标签页
name	显示标签	string	-	否	-
icon	图标	string	-	否	-
props	下级字段	object	-	否	-

注意

tab只能出现在option的直属下级。

option直属下级中基本配置项将合并到左侧第一个竖向标签页(基本面板)中。

tabs 右侧横向标签页

{
  "type": "tabs",
  "name": "系列",
  "multiple": true,
  "add": true,
  "remove": true,
  "props": {
    "name": {
      "type": "text",
      "name": "标题名称"
    }
  },
  "default": {
    "name": "默认名称"
  }
}

字段名	含义	类型	默认值	是否必选	备注
type	tabs	string	-	是	解析为右侧横向标签页
name	显示标签	string	-	是	-
multiple	是否是数组	boolean	false	否	-
add	允许添加	boolean	false	否	-
remove	允许删除	boolean	false	否	-
props	下级字段	object	-	否	-
default	默认值	object		否	与 props 对应

group 折叠面板

{
  "type": "group",
  "name": "文本样式",
  "isOpen": true,
  "props": {
    "fontSize": {
      "type": "number",
      "name": "字体大小"
    }
  }
}

字段名	含义	类型	默认值	是否必选	备注
type	group	string	-	是	解析为折叠面板
name	显示标签	string	-	是	-
isOpen	默认是否打开折叠面板	boolean	false	否	-
props	下级字段	object	-	否	-

Echarts配置项类型

title 标题

{
	"type": "title-echarts",
    "name": "标题",
    "icon": "widget-title",
    "default": {
        "show": true,    // 是否显示图表标题
        "text": "标题",   // 主标题文字
        "link": "",      // 主标题超链接
        "subtext": "",   // 副标题文本
        "subLink": "",   // 副标题文本连接
        "itemGap": 10    // 主副标题纵向间隔
    }
}

legend 图例

{
    "type": "legend-echarts",
    "name": "图例",
    "icon": "widget-legend",
    "default": {
        "show": true,          // 是否显示图表图例
        "selectedMode": true,  // 选择模式
        "orient": "horizontal" // 排列朝向
    }
}

{
    "type": "tooltip-echarts",
    "name": "提示框",
    "icon": "widget-tooltip",
    "default": {
        "show": true,                               // 是否显示图表提示框
        "formatter": "",                            // 提示模板
        "trigger": "item",                          // 触发点 item\axis\none
        "backgroundColor": "rgba(50,50,50,0.7)",    // 背景颜色
        "borderColor": "#333",                      // 边框颜色
        "borderWidth": 0                            // 边框宽度 
    }
}

toolbox 工具栏

{
    "type": "toolbox-echarts",
    "name": "工具栏",
    "icon": "widget-toolbox",
    "default": {
        "show": true,            // 是否显示图表工具栏
        "itemSize": 15,          // 图标大小
        "orient": "horizontal",  // 排列朝向
        "itemGap": 10            // 图标间隔
    }
}

注意

使用Echarts配置项类型时，config.json ---> type 必须为echarts。

自定义配置项显示于隐藏

使用show, 来对自定义配置项进行显示和隐藏，show字段可以用于基本配置类型和type为group。

用于基本类型

{
  "isShow": {
    "type": "switch",
    "name": "是否显示",
    "default": true
  },
  "position": {
    "type": "radio",
    "name": "对齐方式",
    "default": "center",
    "isButton": false,
    "options": [
      { "name": "左", "value": "left" },
      { "name": "中", "value": "center" },
      { "name": "右", "value": "right" }
    ]
  },
  "name": {
    "type": "text",
    "name": "名称",
    "default": "",
    "show": {
      "isShow": true, // 当isShow = true,并且position为"center"的时候，名称文本框才显示
      "position": "center"
    }
  }
}

type为group

{
  "isStyle": {
    "type": "switch",
    "name": "显示标题",
    "default": true,
    "labelPosition": "left"
  },
  "textStyle": {
    "type": "group",
    "name": "标题样式",
    "isOpen": true,
    "show": {
      "isStyle": true // 当isStyle为true时，标题样式的折叠面板才显示，
    },
    "props": {
      "fontSize": {
        "type": "number",
        "name": "文字大小",
        "default": 32,
        "show": {
          "isSize": true
        }
      }
    }
  }
}