vue自定义开关组件使用详解 vue自定义开关组件使用详解

本文实例为大家分享了vue自定义开关组件的具体代码，供大家参考，具体内容如下
switch.vue：

.switch {position: relative; border-radius: 20px; border: 1px solid #dfdfdf; width: 45px; height: 23px; .switch-circle {position: absolute; width: 21px; height: 21px; background-color: #fff; border-radius: 50%; border: 1px solid #dfdfdf; box-shadow: 0 1px 1px #ccc; }.on {right: 0; // background-color: #64bd63; border-color: #64bd63; transform: translate(X); transition: transform 0.5s, right 0.5s; }}.switch-on {background-color: #64bd63; }

在父组件中引入并传值使用：

import toggleSwitch from '../../components/switch.vue'; export default {data() {return {}},components: {toggleSwitch},methods: {changeSwitch() {this.systemConfig.enable_email = !this.systemConfig.enable_email; }}}

效果图：

文章图片

注：
父组件向子组件传值，可以直接通过:isOpen="systemConfig.enable_email"传递数据，子组件通过 prop 接收数据：props: ["isOpen"],；
但子组件不能直接修改父组件的数据，可以通过 $emit 调用父组件的方法来修改父组件的数据，$emit 的第一个参数要与父组件 @ 后的名称保持一致。
【vue自定义开关组件使用详解】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。