vue自定义form控件,解决vue+layui组合时checkbutton和radiobutton事件被覆盖问题
vue+layui组合时checkbutton和radiobutton事件会被layui覆盖,导致数据无法绑定,需要自定义form表单控件
·
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>
更多推荐
已为社区贡献1条内容
所有评论(0)