溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
用法：
import switchc from './public/switch' <switchc v-model="value1" text="on|off"></switchc>
屬性
text 非必填，類型為string，要求格式為“on|off” ,以 | 分隔
事件
change
html部分：
<template>
<div>
<span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" >
<div v-if="isChecked && direction.length > 0" >
{{direction[0]}}
</div>
<div v-if="!isChecked && direction.length > 0" >
{{direction[1]}}
</div>
</span>
</div>
</template>
js部分：
<script>
export default {
name: 'switchComponent',
props: {
value: {
type: Boolean,
default: true
},
text: {
type: String,
default: ''
}
},
data () {
return {
isChecked: this.value
}
},
computed: {
direction () {
if (this.text) {
return this.text.split('|')
} else {
return []
}
}
},
watch: {
value (val) {
this.isChecked = val
},
isChecked(val) {
this.$emit('change', val);
}
},
methods: {
toggle() {
this.isChecked = !this.isChecked;
}
}
}
</script>
style部分：
<style>
.weui-switch {
display: block;
position: relative;
width: 52px;
height: 24px;
border: 1px solid #DFDFDF;
outline: 0;
border-radius: 16px;
box-sizing: border-box;
background-color: #DFDFDF;
transition: background-color 0.1s, border 0.1s;
cursor: pointer;
}
.weui-switch:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 22px;
border-radius: 15px;
background-color: #FDFDFD;
transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.weui-switch:after {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 22px;
height: 22px;
border-radius: 15px;
background-color: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
.weui-switch-on {
border-color: #6F6F6F;
background-color: #1AAD19;
}
.weui-switch-on:before {
border-color: #1AAD19;
background-color: #409eff;
}
.weui-switch-on:after {
transform: translateX(28px);
}
</style>
以上這篇vue自定義switch開關組件,實現樣式可自行更改就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
