我的项目本来用的element,但是switch开关不符合设计要求,于是自己封装了一个switch组件,并且实现了switch开关的双向数据绑定

调用开关组件
组件实现了switch开关的双向数据绑定,在父组件的methods中写一个@change事件
switchChange() {
console.log("switch值改变");
},补充知识:vue 监控el-switch控件值的变化
我要的效果是根据系统消息的推送范围决定推送人标签的显示,如下图两种情况:
——选择全站推送

——选择个人推送

——页面定义的data对象

el-switch标签控件的代码, v-model="entity.pushRange"绑定的是推送范围字段
下面的推送人id文本框,v-if=“FalgpushId”用来控制该文本框的显示,等于false时隐藏,true时显示(默认值为初始化时定义的FalgpushId = false,所以隐藏掉了)
methods中的方法,通过$event写法来监控该控件值的变化
methods:{
//该方法传入推送范围值,根据判断,决定是否展示其下面的推送人ID文本框
parens2(value){
let self = this ;
if(value == false){
//el-switch控件为 个人推送时,value为false
self.FalgpushId = true; //推送人id文本框显示
self.entity.pushRange = false;
}else if(value == true){
//el-switch控件为 true 全站推送,value为true
self.FalgpushId = false; //推送人id文本框隐藏
self.entity.pushRange = true;
}
},
}