1. 程式人生 > >vue自定義form控制元件,解決vue+layui組合時checkbutton和radiobutton事件被覆蓋問題

vue自定義form控制元件,解決vue+layui組合時checkbutton和radiobutton事件被覆蓋問題

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>