新建一个Switch组件
1 <template>
2 <div>
3 <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative">
4 <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">
5 {{direction[0]}}
6 </div>
7 <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">
8 {{direction[1]}}
9 </div>
10 </span>
11 </div>
12 </template>
13 <script>
14 export default {
15 name: 'switchComponent',
16 props: {
17 value: {
18 type: Boolean,
19 default: true
20 },
21 text: {
22 type: String,
23 default: ''
24 }
25 },
26 data () {
27 return {
28 isChecked: this.value
29 }
30 },
31 computed: {
32 direction () {
33 if (this.text) {
34 return this.text.split('|')
35 } else {
36 return []
37 }
38 }
39 },
40 watch: {
41 value (val) {
42 this.isChecked = val
43 },
44 isChecked(val) {
45 this.$emit('change', val);
46 }
47 },
48 methods: {
49 toggle() {
50 this.isChecked = !this.isChecked;
51 }
52 }
53 }
54 </script>
55 <style>
56 .weui-switch {
57 display: block;
58 position: relative;
59 width: 52px;
60 height: 24px;
61 border: 1px solid #DFDFDF;
62 outline: 0;
63 border-radius: 16px;
64 box-sizing: border-box;
65 background-color: #DFDFDF;
66 transition: background-color 0.1s, border 0.1s;
67 cursor: pointer;
68 }
69 .weui-switch:before {
70 content: " ";
71 position: absolute;
72 top: 0;
73 left: 0;
74 width: 50px;
75 height: 22px;
76 border-radius: 15px;
77 background-color: #FDFDFD;
78 transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
79 }
80 .weui-switch:after {
81 content: " ";
82 position: absolute;
83 top: 0;
84 left: 0;
85 width: 22px;
86 height: 22px;
87 border-radius: 15px;
88 background-color: #FFFFFF;
89 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
90 transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
91 }
92 .weui-switch-on {
93 border-color: #6F6F6F;
94 background-color: #1AAD19;
95 }
96 .weui-switch-on:before {
97 border-color: #1AAD19;
98 background-color: #409eff;
99 }
100 .weui-switch-on:after {
101 transform: translateX(28px);
102 }
103 </style>
在父组件中引入
<template>
<div>
<switch v-model="value" text="on|off"></switch>
</div>
</template>
<script>
import switch from './components/Switch'
export default {
name: "App",
components: {
switch
},
data() {
return {
value:''
},
methods:{
}
};
</script>
<style lang="less">
</style>
效果如下
