vue自定義switch開關(guān)組件,實(shí)現(xiàn)樣式可自行更改
更新時(shí)間：2019年11月01日 10:06:55 作者：qq_39258914
今天小編就為大家分享一篇vue自定義switch開關(guān)組件,實(shí)現(xiàn)樣式可自行更改，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
用法：
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" style="position:relative">
<div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;line-height:20px;color:#FFF;user-select:none">
{{direction[0]}}
</div>
<div v-if="!isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;line-height:22px;color:#7A7A7A;text-align:right;user-select:none">
{{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開關(guān)組件,實(shí)現(xiàn)樣式可自行更改就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Vue前端路由hash與history差異的深入了解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
vue實(shí)現(xiàn)無縫滾動(dòng)手摸手教程
這篇文章主要為大家介紹了vue實(shí)現(xiàn)無縫滾動(dòng)手摸手教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue自定義封裝按鈕組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue axios重復(fù)點(diǎn)擊取消上一次請(qǐng)求封裝的方法
這篇文章主要介紹了vue axios重復(fù)點(diǎn)擊取消上一次請(qǐng)求封裝的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
通過命令行創(chuàng)建vue項(xiàng)目的方法
這篇文章主要介紹了通過命令創(chuàng)建vue項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了vue install 注冊(cè)全局組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）
這篇文章主要介紹了VUE table表格動(dòng)態(tài)添加一列數(shù)據(jù),新增的這些數(shù)據(jù)不可以編輯（v-model綁定的數(shù)據(jù)不能實(shí)時(shí)更新）,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2020-04-04
vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值
這篇文章主要介紹了vue $set 實(shí)現(xiàn)給數(shù)組集合對(duì)象賦值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要為大家詳細(xì)介紹了vue組件間傳值的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家介紹了Vue首屏?xí)r間指標(biāo)采集最佳方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01