vue自定義form控制元件,解決vue+layui組合時checkbutton和radiobutton事件被覆蓋問題
阿新 • • 發佈:2019-01-24
vue+layui組合時checkbutton和radiobutton事件會被layui覆蓋,導致資料無法繫結,需要自定義form表單控制元件,如下:
VRadio.vue
<template> <div class="layui-unselect layui-form-radio" :class="{'layui-form-radioed':isOn}" @click="change" > <i v-if="isOn" class="layui-anim layui-icon layui-anim-scaleSpring"></i> <i v-else class="layui-anim layui-icon"></i> <span>{{text}}</span> </div> </template> <script> export default { model: { prop: 'modelValue', }, props:{ value: String, modelValue: String, text: String }, methods:{ change(){ this.$emit('input', this.value); } }, computed: { isOn: function() { return this.modelValue === this.value; } } } </script>
VCheck.vue
<template> <div class="layui-unselect layui-form-checkbox" :class="{'layui-form-checked':isOn}" @click="changeCheckd" lay-skin="primary"><span>{{text}}</span><i class="layui-icon"></i></div> </template> <script> //每組元件一個model,值為字串陣列 export default { model: { prop: 'modelArray', }, props:['value','text', 'modelArray'], methods:{ changeCheckd(){ var index = this.modelArray.indexOf(this.value) if(index < 0) this.modelArray.push(this.value); else this.modelArray.splice(index, 1); } }, computed: { isOn: function() { return this.modelArray.indexOf(this.value) > -1; } } } </script>