switch调函数 vue_vue自定义switch开关组件，样式可自行更改

有喜欢朋友可以关注一下，有时间会继续更新，现在这些都是我在csdn博客上发表过的内容，有喜欢的朋友，可以赞赏支持一下，有什么希望我封装的组件可以在下面评论留言，谢了

用法：

import switchc from './public/switch'

属性

text 非必填，类型为string，要求格式为“on|off” ,以 | 分隔

事件

change

html部分：

{{direction[0]}}

{{direction[1]}}

js部分：

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;

}

}

}

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);

}