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