vue自定义开关组件使用详解
作者:dd&zy
这篇文章主要为大家详细介绍了vue自定义开关组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue自定义开关组件的具体代码,供大家参考,具体内容如下
switch.vue:
<template> <div class="disLB"> <div class="switch disLB" @click="toggleSwitch" :class="isOpen?'switch-on':''"> <span class="disB switch-circle" :class="isOpen?'on':''"></span> </div> </div> </template> <script> export default { data() { return { // isOpen: false } }, props: ["isOpen"], methods: { toggleSwitch() { // 子组件不能直接修改父组件的数据,要通过$emit this.$emit('changeSwitch') } } } </script> <style lang="less" scoped> .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; } </style>
在父组件中引入并传值使用:
<template> <toggle-switch :isOpen="systemConfig.enable_email" @changeSwitch="changeSwitch" v-model="systemConfig.enable_email"></toggle-switch> </template> <script> 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
的第一个参数要与父组件 @
后的名称保持一致。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。