配置项分组
良好的分类划分和命名利于用户使用，平台也提供分组功能，一个没有type属性并且value为数组的json对象会被解析为一个分组。
1. 纵向分组
1.1. 分组配置
分组默认为折叠面板的纵向形式，不需要设置额外的字段。
根据配置解析顺序，想让纵向分组生效，需要将各分组对象置于一个数组中。
你可能会有疑问，configuration属性值不就是一个数组吗？不知你是否还记得“入口文件”这一章在介绍configuration属性时提及的reduceConfig方法，这个方法会解析配置文件，将configuration转化为对象，而新版本中，不使用reduceConfig方法，平台也会自动将该数组转为对象。
在书写纵向分组，且该分组是configuration下的第一层级时，我们建议你在外层另写一个用来包裹的容器配置，具体如下示例：
export default{
//...
configuration: [
{ //配置项容器，不被数组包裹，所以不会作为分组生效，也不会被页面渲染
name: "chart",
displayName: "组件",
value: [
{ //分组1
name: "titleGroup",
displayName: "标题文本",
value: [
{
name: "fontFamily",
displayName: "字体",
value: "Microsoft Yahei",
type: "font"
},
{
name: "fontSize",
displayName: "大小",
value: 32
},
{
name: "color",
displayName: "颜色",
value: "#ddd",
type: "color"
}
]
},
{ //分组2
name: "contentGrop",
displayName: "内容文本",
value: [
{
name: "fontFamily",
displayName: "字体",
value: "Microsoft Yahei",
type: "font"
},
{
name: "fontSize",
displayName: "大小",
value: 32
},
{
name: "color",
displayName: "颜色",
value: "#ddd",
type: "color"
}
]
}
]
},
{ //回调等交互配置
name: "interaction",
displayName: "交互",
value: [
//...
]
}
]
}{
...
"configuration": [
{
"name": "chart",
"displayName": "组件",
"value": [
{
"name": "titleGroup",
"displayName": "标题文本",
"value": [
{
"name": "fontFamily",
"displayName": "字体",
"value": "Microsoft Yahei",
"type": "font"
},
{
"name": "fontSize",
"displayName": "大小",
"value": 32
},
{
"name": "color",
"displayName": "颜色",
"value": "#ddd",
"type": "color"
}
]
},
{
"name": "contentGrop",
"displayName": "内容文本",
"value": [
{
"name": "fontFamily",
"displayName": "字体",
"value": "Microsoft Yahei",
"type": "font"
},
{
"name": "fontSize",
"displayName": "大小",
"value": 32
},
{
"name": "color",
"displayName": "颜色",
"value": "#ddd",
"type": "color"
}
]
}
]
},
{
"name": "interaction",
"displayName": "交互",
"value": []
}
]
}1.2. 页面效果
2. 横向分组
2.1. 分组配置
将configuration下的第一个配置项（必须是分组）的config.layout设为”horizontal“，分组则为以tab展示的横向形式。
export default{
//...
configuration: [
{
name: 'chart',
displayName: '全局',
config: {
layout: 'horizontal' //第一个分组添加config.layout
},
value: [
//...
]
},
{ //后续同级分组都会被识别为tab分组
name: 'axis',
displayName: '坐标轴',
value: [
//...
]
},
{
name: 'series',
displayName: '系列',
value: [
//...
]
},
{
name: 'other',
displayName: '其他',
value: [
//...
]
}
]
}{
...
"configuration": [
{
"name": "chart",
"displayName": "全局",
"config": {
"layout": "horizontal"
},
"value": [
...
]
},
{
"name": "axis",
"displayName": "坐标轴",
"value": [
...
]
},
{
"name": "series",
"displayName": "系列",
"value": [
...
]
},
{
"name": "other",
"displayName": "其他",
"value": [
...
]
}
]
}横向分组不需要和纵向分组一样在最外层包裹一层容器分组
2.2. 页面效果
2.3. 按钮组
设置分组内的子分组以按钮组的形式来切换配置项。
给分组添加type字段，并赋值为"menu"，该配置项只能在横向布局配置且第一层配置才有效。
export default{
//...
configuration: [
{
name: 'chart',
displayName: '全局',
config: {
layout: 'horizontal'
},
type: "menu",
value: [
{
name: 'prefix',
displayName: '前缀',
value: [
//...
]
},
{
name: 'number',
displayName: '数字',
value: [
//...
]
},
{
name: 'suffix',
displayName: '后缀',
value: [
//...
]
},
]
},
//...
]
}
3. 分组嵌套
3.1. 横向分组嵌套
你或许注意到横向分组是在configuration下的第一个配置项设置config.layout为”horizontal“才会生效，所以无论是在纵向分组还是横向分组下，嵌套一个横向分组作为子分组，子横向分组都不可能是configuration的第一个配置项了。
所以横向分组是不能作为其他分组的子分组的，我们建议你使用横向分组的按钮组，把子纵向分组变成横向排列的按钮来实现类似效果。
3.2. 纵向分组嵌套
与横向分组相反，纵向分组可以作为其他分组的子分组进行嵌套，无论父分组是在纵向分组还是横向分组
3.2.1 纵向分组中嵌套纵向分组
export default{
//...
configuration: [
{
name: "chart",
displayName: "组件",
value: [
{
name:"parent",
displayName:"父分组",
value:[
{
name:"child",
displayName:"子分组",
value:[
{
name:"grandChild",
displayName:"孙分组",
value:[
]
}
]
}
]
},
{
name: "parent-2",
displayName: "父分组2",
value: [
]
}
]
}
]
}
3.2.2 横向分组中嵌套纵向分组
export default{
//...
configuration: [
{
name:"parent",
displayName:"父分组",
config: {
layout: 'horizontal'
},
value:[
{
name:"child",
displayName:"子分组",
value:[
{
name:"grandChild",
displayName:"孙分组",
value:[
]
}
]
}
]
},
{
name: "parent-2",
displayName: "父分组2",
value: [
]
}
]
}
4. 示例Demo下载
如遇其他使用问题，可扫描下方二维码，获取更多产品支持~
