多选框组件（多个）

该组件采用自定义入参将实现多选框功能

属性	值	备注
type	ChartOption
name	属性名，可以自定义，不要超过4个字，否则会折行。
use	custom
callback	String/object	可以直接配置回调函数名或一个对象。当配置callback为回调函数名时，回调函数会接收一个返回值。返回值是输入的数组的某一项。当配置为对象时，具体用法请看尺寸组件下面的callback配置为object

customInput下可以配置的属性：

属性	类型	值	备注
ngvcheckList	Array	[]	多选框默认值

ngvcheckList的入参值格式如：

[
{ "label": "legendAble", "text": "图例", "checked": true },
{ "label": "numerical", "text": "数值标签", "checked": true },
{ "label": "XtitleAble", "text": "X轴标题", "checked": true },
{ "label": "XgridLineAble", "text": "X轴网格", "checked": true },
{ "label": "YgridLineAble", "text": "Y轴网格", "checked": true },
{ "label": "Xaxis", "text": "X轴刻度", "checked": true },
{ "label": "Yaxis", "text": "Y轴刻度", "checked": true }
]

text为显示值，label为实际值，checked为绑定多选框是否呈选中状态。

config.json中的配置：

{
    "develop":{
        "html":"index.html",
        "css":["./styles/index.css"],
        "entry":"./scripts/main.js",
        "scripts":{
        }
    },
    "plugins":[],
    "services":[],
  "libs":[],
  "customAttributes":{
        "pro":[
            {
                "type":"ChartOption",
                "name":"多选框组",
                "use":"custom",
                "callback":{
                    "ngvModel":"ngvcheckListChange"
                },
                "customInput":{
                    "ngvcheckList":[
                        { "label": "legendAble", "text": "图例", "checked": true },
                        { "label": "numerical", "text": "数值标签", "checked": true },
                        { "label": "XtitleAble", "text": "X轴标题", "checked": true },
                        { "label": "XgridLineAble", "text": "X轴网格", "checked": true },
                        { "label": "YgridLineAble", "text": "Y轴网格", "checked": true },
                        { "label": "Xaxis", "text": "X轴刻度", "checked": true },
                        { "label": "Yaxis", "text": "Y轴刻度", "checked": true }
                      ]
                }
            }
        ],
        "con":[
           
        ]

    }
}

上面的示例中，在customAttributes的pro属性中配置了一个多选框组件。

这里配置了use:custom，在这里为固定用法。有添加了自定义回调函数，ngvcheckListChange。

再在customInput下添加了入参值ngvcheckList。

ngvcheckList是个数组，数组中的每一项代表一个多选框。

text表示在属性栏中展示的名子，checked为true表明，选择框为选中状态，false为未选中的状态。

main.js:

(function(){
    return{
    $data:{
        properties:null
    },
    $hooks:{
        onInit(properties){
            this.properties=properties;
        },
        onDestroy(){

        },
        setData(){
            
        },
        outSizeCallBack(){

        }
    },
    $methods:{
        ngvcheckListChange(data){
                if(data){
                    console.log('ngvcheckListChange:///////')
                    console.log(data)
                }
            //{ "label": "Yaxis", "text": "Y轴刻度", "checked": false }
        }
    }
  }
})

ngvcheckListChange函数组件初始化的时候会调用一次，由于用户没有勾选任何多选框，所以返回值是undefined。其他状态下，更改任一多选框的状态，将会拿到这个多选框那一项的数据。所以在返回值例需要添加判断，判断data是否存在，然后再执行。

属性栏展示：

Application

当你选择或取消选择多选框的时候，会发现ngvcheckListChange函数拿到的只是发生变化的那一行的值。

那么如何拿到所有的值呢？

其实在onInit方法中的properties参数中，会存储所有属性栏相关的数据。

可以通过this.properties.config.customAttributes访问到所有的属性，pro下存储的是属性栏组件的配置，con下配置的是数据源组件。

可以通过下面的方法来获取

    let _index=this.properties.config.customAttributes.pro.findIndex(_pro=>_pro.name==='多选框组');
    let pro=this.properties.config.customAttributes.pro[_index];
    pro.customInput.ngvcheckList;

示例中通过遍历pro列表，匹配属性栏组件名称拿到了多选框组的配置项，再通过访问customInput.ngvcheckList得到所有的列表值。