vue.js封裝switch開關元件的操作
阿新 • • 發佈:2020-10-26
我的專案本來用的element,但是switch開關不符合設計要求,於是自己封裝了一個switch元件,並且實現了switch開關的雙向資料繫結
<template> <label role="checkbox" :class="['switch',{ toggled }]"> <input type="checkbox" class="switch-input" @change="toggle" /> <div class="switch-core" :style="{ backgroundColor: toggled ? colorChecked : colorUnchecked }" > <div class="switch-button" :style="{ transition: `transform ${speed}ms`,transform: toggled ? null : `translate3d(32px,0px,0px)` }" ></div> </div> <span class="switch-label label-right" v-if="toggled" v-html="labelChecked"> </span> <span class="switch-label label-left" v-html="labelUnchecked" v-else> </span> </label> </template>
<script> export default { name: "ToggleSwitch",data() { return { toggled: this.value }; },props: { value: { type: Boolean,default: true },speed: { type: Number,default: 100 },labelChecked: { type: String,default: "啟用" },labelUnchecked: { type: String,default: "停用" },colorChecked: { type: String,default: "#11CED2" },colorUnchecked: { type: String,default: "#E6EAF1" } },watch: { value: function(val) { this.value = val; } },methods: { toggle(event) { this.toggled = !this.toggled; this.$emit("update:value",this.toggled); this.$emit("change",event); } } }; </script>
<style lang="scss" scoped> .switch { display: inline-block; position: relative; overflow: hidden; vertical-align: middle; user-select: none; font-size: 10px; cursor: pointer; .switch-input { display: none; } .switch-label { position: absolute; top: 0; font-weight: 600; color: white; z-index: 2; &.label-left { left: 10px; line-height: 20px; border-top-left-radius: 2px; border-bottom-left-radius: 2px; color: #b5bdc8; } &.label-right { right: 10px; line-height: 20px; border-top-right-radius: 2px; border-bottom-right-radius: 2px; } } .switch-core { display: block; position: relative; box-sizing: border-box; outline: 0; margin: 0; transition: border-color 0.3s,background-color 0.3s; user-select: none; width: 46px; height: 20px; border-radius: 4px; line-height: 20px; .switch-button { width: 8px; height: 16px; display: block; position: absolute; overflow: hidden; top: 2; left: 2; z-index: 3; transform: translate3d(0,0); background-color: rgba(255,255,1); border-radius: 4px; margin-top: 2px; margin-left: 2px; } } } </style>
呼叫開關元件
<toggle-switch v-model="value" :value.sync="value" @change="switchChange" > </toggle-switch>
元件實現了switch開關的雙向資料繫結,在父元件的methods中寫一個@change事件
switchChange() { console.log("switch值改變"); },
補充知識:vue 監控el-switch控制元件值的變化
我要的效果是根據系統訊息的推送範圍決定推送人標籤的顯示,如下圖兩種情況:
——選擇全站推送
——選擇個人推送
——頁面定義的data物件
el-switch標籤控制元件的程式碼, v-model="entity.pushRange"繫結的是推送範圍欄位
<el-form-item label="推送範圍:" :label-width="formLabelWidth" prop="pushRange"> <el-switch v-model="entity.pushRange" active-color="#13ce66" inactive-color="#ff4949" active-text="全站" inactive-text="個人" @change="parens2($event)"> </el-switch> </el-form-item>
下面的推送人id文字框,v-if=“FalgpushId”用來控制該文字框的顯示,等於false時隱藏,true時顯示(預設值為初始化時定義的FalgpushId = false,所以隱藏掉了)
<!-- 推送人id --> <el-form-item label="推送人ID:" :label-width="formLabelWidth" prop="pushId" v-if="FalgpushId"> <el-input v-model="entity.pushId" :disabled="disabled" clearable></el-input> </el-form-item>
methods中的方法,通過$event寫法來監控該控制元件值的變化
methods:{ //該方法傳入推送範圍值,根據判斷,決定是否展示其下面的推送人ID文字框 parens2(value){ let self = this ; if(value == false){ //el-switch控制元件為 個人推送時,value為false self.FalgpushId = true; //推送人id文字框顯示 self.entity.pushRange = false; }else if(value == true){ //el-switch控制元件為 true 全站推送,value為true self.FalgpushId = false; //推送人id文字框隱藏 self.entity.pushRange = true; } },}
以上這篇vue.js封裝switch開關元件的操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。