属性栏分组组件
该组件可以对多个属性栏组件进行分组并且能够动态添加和删除分组，目前可应用于具有多数据源属性栏的配置。
| 属性 | 值 | 备注 |
|---|---|---|
| type | PropertiesItemGroup | |
| name | 属性名，可以自定义，不要超过4个字，否则会折行。 | |
| customInput | object | 可以配置如参值 |
- customInput下可以配置的属性：
| 属性 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| showSwitchButton | boolean | true | 为标题左侧箭头是否展示，如果不展示，则该组件将始终呈现展开状态，switchStatus的值将无效。 |
| switchStatus | boolean | false | 默认为false，设置该组件的展开状态。当showSwitchButton为false时，该值设置将无效 |
| childItemArrowDisplay | boolean | false | 子内容标题左侧的箭头是否展示 |
| rightOperator | String | 'plus'/'checkBox'/'' | 配置为plus，在该组件右侧将呈现+按钮，点击后可以动态复制一个分组内容。同时分组内容上右侧会呈现删除icon，点击后可以对该项分组内容删除。配置为checkBox将展示一个选择框。 |
| children | Array | 可以配置的属性栏组件 |
children:
children是一个数组，里面又可以容纳多个数组，我们称之为属性组。每个属性组里面可以配置多个属性栏组件。下面的示例中配置了2个属性栏组件：一个文本输入框，一个颜色组件。 children中可以只配一个属性组，当在customInput下配置rightOperator为'plus'时，可以通过分组组件右侧的+号按钮来动态复制属性组。 如果想要关闭这个功能，可以配置rightOperator的值为""空字符串。
开发者可以配置多个属性组，各个属性组中也可以配置不同的属性栏组件，需要注意的是如果点击分组组件右侧的+号按钮，复制的永远是第一个分组的内容。
- callback
该组件有多个回调函数，所以callback为数组，数组中每个对象对应一个回调的配置项。
| 属性 | 类型 | 默认值 | 备注 |
|---|---|---|---|
| switchStatusChange | Object | {"switchStatus":自定义函数名} | 该组件打开关闭时的回调 |
| addItemEvent | Object | {"addItemEvent":自定义函数名} | 点击+号时的回调函数 |
| deleteItemEvent | Object | {"deleteItemEvent":自定义函数名} | 点击属性组删除按钮的回调函数 |
switchStatusChange:
返回一个布尔值，表明该组件的展开状态。
addItemEvent：
当点击+号按钮时，返回复制后的属性组。
deleteItemEvent
当点击属性组上的删除按钮时，返回该属性组的序号。
示例：
{
"develop":{
"html":"index.html",
"css":["./styles/index.css"],
"entry":"./scripts/main.js",
"scripts":{
}
},
"plugins":["jquery"],
"services":["$customService","$eventDispatch"],
"libs":["https://cdn.jsdelivr.net/npm/vue/dist/vue.js"],
"customAttributes":{
"pro":[
{
"type":"PropertiesItemGroup",
"name":"属性组",
"customInput":{
"showSwitchButton":true,
"switchStatus":false,
"rightOperator":"plus",
"children":[
[
{
"type":"IrootTextInput",
"name":"标题名称",
"customInput":{
"ngvtext":"动画演示"
},
"verification":{
"ngvtext":{
"maxLength":20,
"errMessage":"标题不能超过20个字符"
}
},
"callback":{
"ngvtext":"titleChange"
}
},
{
"type":"GradientColor",
"name":"色块颜色",
"customInput":{
"shade":true,
"ngvModel":"#007733"
},
"callback":{
"ngvModel":"colorChange"
}
}
]
]
},
"callback":[
{"switchStatusChange":{
"switchStatus":"customSwitchStatusChange"
}},
{"addItemEvent":{"addItemEvent":"addItemEventCallback"}},
{"deleteItemEvent":{"deleteItemEvent":"deleteItemEventCallback"}}
]
}
],
"con":[
]
}
}
上面示例中配置了一个分组组件，并且在分组组件中又配置了一个文本组件和一个颜色组件。 因为在customInput属性中配置了rightOperator的值为plus，所以在分组组件将拥有动态添加和删除分组内容的能力。
属性组中的属性栏组件的callback
上面的示例中，如果在编辑器中通过+号按钮动态复制了一个分组，那么开发者定义的属性栏组件的callback函数，该如何区分是来自哪个分组的调用呢？
其实这时开发者定义的callback函数，将会接收一个额外的参数，index。 index的取值从0开始，表明当前组件所在属性组的索引值。
例如：
main.js:
(function(options){
...
var returnData= {
$data:{
properties_:null,
$customService:null,
$eventDispatch:null,
},
$hooks:{
onInit(properties_){
},
...
},
$methods:{
titleChange(value,index){
console.log(value,index);
},
colorChange(color,index){
console.log(value,index);
}
}
}
return returnData;
})
当改变第一个属性组中文本框中的值时，index的值为0。改变第二个属性组中的文本，index的值为1.