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

<template><label role="checkbox" :class="['switch', { toggled }]"><input type="checkbox" class="switch-input" @change="toggle" /><divclass="switch-core":style="{ backgroundColor: toggled ? colorChecked : colorUnchecked }"><divclass="switch-button":style="{transition: `transform ${speed}ms`,transform: toggled ? null : `translate3d(32px, 0px, 0px)`}"></div></div><span class="switch-label label-right" v-if="toggled" v-html="labelChecked"></span><span class="switch-label label-left" v-html="labelUnchecked" v-else></span></label></template><script>export default { name: "ToggleSwitch", data() { return { toggled: this.value }; }, props: { value: { type: Boolean, default: true }, speed: { type: Number, default: 100 }, labelChecked: { type: String, default: "启用" }, labelUnchecked: { type: String, default: "停用" }, colorChecked: { type: String, default: "#11CED2" }, colorUnchecked: { type: String, default: "#E6EAF1" } }, watch: { value: function(val) { this.value = val; } }, methods: { toggle(event) { this.toggled = !this.toggled; this.$emit("update:value", this.toggled); this.$emit("change", event); } }};</script><style lang="scss" scoped>.switch { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; user-select: none; font-size: 10px; cursor: pointer; .switch-input { display: none; } .switch-label { position: absolute; top: 0; font-weight: 600; color: white; z-index: 2; &.label-left { left: 10px; line-height: 20px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; color: #b5bdc8; } &.label-right { right: 10px; line-height: 20px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } } .switch-core { display: block; position: relative; box-sizing: border-box; outline: 0; margin: 0; transition: border-color 0.3s, background-color 0.3s; user-select: none; width: 46px; height: 20px; border-radius: 4px; line-height: 20px; .switch-button { width: 8px; height: 16px; display: block; position: absolute; overflow: hidden; top: 2; left: 2; z-index: 3; transform: translate3d(0, 0, 0); background-color: rgba(255, 255, 255, 1); border-radius: 4px; margin-top: 2px; margin-left: 2px; } }}</style>

调用开关组件

<toggle-switch v-model="value" :value.sync="value" @change="switchChange" > </toggle-switch>

组件实现了switch开关的双向数据绑定，在父组件的methods中写一个@change事件

switchChange() { console.log("switch值改变"); },

补充知识：vue 监控el-switch控件值的变化

我要的效果是根据系统消息的推送范围决定推送人标签的显示，如下图两种情况：

——选择全站推送

——选择个人推送

——页面定义的data对象

el-switch标签控件的代码， v-model="entity.pushRange"绑定的是推送范围字段

<el-form-item label="推送范围：" :label-width="formLabelWidth" prop="pushRange"> <el-switch v-model="entity.pushRange" active-color="#13ce66" inactive-color="#ff4949" active-text="全站" inactive-text="个人" @change="parens2($event)"> </el-switch> </el-form-item>

下面的推送人id文本框，v-if=“FalgpushId”用来控制该文本框的显示，等于false时隐藏，true时显示（默认值为初始化时定义的FalgpushId = false，所以隐藏掉了）

<!-- 推送人id --> <el-form-item label="推送人ID：" :label-width="formLabelWidth" prop="pushId" v-if="FalgpushId"> <el-input v-model="entity.pushId" :disabled="disabled" clearable></el-input> </el-form-item>

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; } }, }

以上这篇vue.js封装switch开关组件的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。