van 自定义组件_vue自定义组件 - switch

项目中需要用到switch这个开关组件，但是又不想用太重量级的组件库了，加载量太大，没必要，所以自己定制了一个，借鉴了一下we-ui的样式。很简单的几行代码，大家可以自己修改样式。

PS:有些东西光靠想可能觉得比较复杂，但真正去做了，还是不难。

我还是习惯分2步走，首先需要在一个独立页面把组件和样式都调好，一切OK了，再封装成组件。

二、 第二步封装成组件调用。就2个vue文件，组件vue+测试调用的vue，完整的代码如下：

1、组件代码(请自行放置到自己项目中对应的位置)

export default {

props: {

value: {

type: Boolean,

default: true

}

},

data() {

return {

me_checked: this.value

}

},

watch: {

me_checked(val) {

this.$emit('input', val);

}

},

methods: {

toggle() {

this.me_checked = !this.me_checked;

}

}

}

.weui-switch {

display: block;

position: relative;

width: 52px;

height: 32px;

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: 30px;

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: 30px;

height: 30px;

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: #1AAD19;

background-color: #1AAD19;

}

.weui-switch-on:before {

border-color: #1AAD19;

background-color: #1AAD19;

}

.weui-switch-on:after {

transform: translateX(20px);

}

2、 调用的代码

查看值

import my_switch from "./my_switch"; //这里引入上一个文件(目录自己定)

export default {

components: {

my_switch

},

data() {

return {

value1: false //组件的初始状态

}

},

methods: {

show() {

alert(this.value1);

}

}

}

希望对大家有用。