vue自定義開關組件使用詳解

更新時間：2022年02月24日 16:24:46 作者：dd&zy

這篇文章主要為大家詳細介紹了vue自定義開關組件的使用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue自定義開關組件的具體代碼，供大家參考，具體內(nèi)容如下

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() {
? ? ? // 子組件不能直接修改父組件的數(shù)據(jù)，要通過$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"傳遞數(shù)據(jù)，子組件通過 prop 接收數(shù)據(jù)：props: ["isOpen"],；
但子組件不能直接修改父組件的數(shù)據(jù)，可以通過 $emit 調用父組件的方法來修改父組件的數(shù)據(jù)，$emit 的第一個參數(shù)要與父組件 @ 后的名稱保持一致。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: