开关组件

相同的组件属性请参考基本组件属性

活动颜色

开关打开时的颜色

未选中值

未选中状态下的值

选中值

选中状态下的值

组件事件

单击事件

每次单击该组件都会触发回调

• 勾选单击后会在json组件的events事件中添加以下对象

{"events": { "click": true}}

• 代码示例

 <json-form 
 :list="list"  
 @emit="print"
:upload-fun="uploadFun"
 ></json-form>

export default {
    data() {
        return {
            list: [ 
                  {
                    "type": "switch",
                    "name": "开关",
                    "exhibitionType": "line",
                    "mustFill": false,
                    "rules": [],
                    "events": {
                        "click": true
                    },
                    "prop": {
                        "name": "",
                        "value": "1",
                        "placeholder": "",
                        "activeColor": "#0d6efd",
                        "activeValue": "1",
                        "inactiveValue": "2"
                    },
                    "msgs": {
                        "className": "class-msg",
                        "msg": ""
                    }
                }  
                ],
        }
    },
  methods: {
    print(param) {
        //param包含三个参数，event触发事件类型，index当前list的下标，item当前对象
        if(param.event == "click"){
            console.log(this.list[param.index]);
        }
    },
  },
}

异步事件

单击不在控制开关状态，会触发回调函数，有开发者自己控制状态

• 代码示例

export default {
    data() {
        return {
            list: [ 
                  {
                    "type": "switch",
                    "name": "开关",
                    "exhibitionType": "line",
                    "mustFill": false,
                    "rules": [],
                    "events": {
                        "async": true
                    },
                    "prop": {
                        "name": "",
                        "value": "1",
                        "placeholder": "",
                        "activeColor": "#0d6efd",
                        "activeValue": "1",
                        "inactiveValue": "2"
                    },
                    "msgs": {
                        "className": "class-msg",
                        "msg": ""
                    }
                }  
                ],
        }
    },
  methods: {
    print(param) {
        //param包含三个参数，event触发事件类型，index当前list的下标，item当前对象
        if(param.event == "async"){
            this.list[param.index].prop.value = !this.list[param.index].prop.value
        }
    },
  },
}

发生改变事件

参照单件事件