vue自定義開關(guān)組件使用詳解
本文實(shí)例為大家分享了vue自定義開關(guān)組件的具體代碼，供大家參考，具體內(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ù)，要通過(guò)$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;
? ? ? ? }
? ? }
}效果圖：
注：
父組件向子組件傳值，可以直接通過(guò):isOpen="systemConfig.enable_email"傳遞數(shù)據(jù)，子組件通過(guò) prop 接收數(shù)據(jù)：props: ["isOpen"],；
但子組件不能直接修改父組件的數(shù)據(jù)，可以通過(guò) $emit 調(diào)用父組件的方法來(lái)修改父組件的數(shù)據(jù)，$emit 的第一個(gè)參數(shù)要與父組件 @ 后的名稱保持一致。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用elementUI table展開行內(nèi)嵌套table問(wèn)題
這篇文章主要介紹了使用elementUI table展開行內(nèi)嵌套table問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)
本文主要介紹了vue常用指令實(shí)現(xiàn)學(xué)生錄入系統(tǒng)的實(shí)戰(zhàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue2/3?登錄后用戶無(wú)操作半小時(shí)后自動(dòng)清除登錄信息退出登錄下線(示例代碼)
這篇文章主要介紹了Vue2/3?登錄后用戶無(wú)操作半小時(shí)后自動(dòng)清除登錄信息退出登錄下線,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue router錯(cuò)誤跳轉(zhuǎn)到首頁(yè)("/")的問(wèn)題及解決
這篇文章主要介紹了Vue router錯(cuò)誤跳轉(zhuǎn)到首頁(yè)("/")的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue+Spring Boot簡(jiǎn)單用戶登錄(附Demo)
這篇文章主要介紹了Vue+Spring Boot簡(jiǎn)單用戶登錄，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Vue?Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建過(guò)程
Mock.js是一個(gè)模擬數(shù)據(jù)的生成器，用來(lái)幫助前端調(diào)試開發(fā)、進(jìn)行前后端的原型分離以及用來(lái)提高自動(dòng)化測(cè)試效率，這篇文章主要介紹了Vue?Mock.js介紹和使用與首頁(yè)導(dǎo)航欄左側(cè)菜單搭建,需要的朋友可以參考下2023-09-09
Vue中splice()方法對(duì)數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)
vue中對(duì)數(shù)組的元素進(jìn)行刪除,以前一直以為這個(gè)方法是vue中特有的,后來(lái)百度之后才知道原來(lái)是js的一個(gè)寫法,下面這篇文章主要給大家介紹了關(guān)于Vue中splice()方法對(duì)數(shù)組進(jìn)行增刪改等操作的實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05
如何利用VUE監(jiān)聽網(wǎng)頁(yè)關(guān)閉并執(zhí)行退出操作
這篇文章主要給大家介紹了關(guān)于如何利用VUE監(jiān)聽網(wǎng)頁(yè)關(guān)閉并執(zhí)行退出操作的相關(guān)資料,因?yàn)轫?xiàng)目中需求,瀏覽器關(guān)閉時(shí)進(jìn)行一些操作處理,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue使用自定義指令實(shí)現(xiàn)按鈕權(quán)限展示功能
這篇文章主要介紹了vue中使用自定義指令實(shí)現(xiàn)按鈕權(quán)限展示功能，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04
記錄一個(gè)Vue3簡(jiǎn)易微信右滑刪除邏輯的思路實(shí)現(xiàn)
本文主要介紹了記錄一個(gè)Vue3簡(jiǎn)易微信右滑邏輯的思路實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07