自定义 vue switch 组件

 1 <template>
 2   <div class="switch clearfix"
 3     @click="toggle"
 4     v-bind:style="{ background: activestate ? activecolor : inactivecolor }">
 5     <div v-show="activestate" class="switch-text switch-on"
 6       transition="switchon">{{activetext}}</div>
 7     <div class="switch-icon"></div>
 8     <div v-show="!activestate" class="switch-text switch-off">{{inactivetext}}</div>
 9   </div>
10 </template>
11 
12 <script>
13 export default {
14   props: {
15     active: {
16       type: boolean,
17       default: false
18     },
19     activetext: {
20       type: string,
21       default: 'onssssss'
22     },
23     activecolor: {
24       type: string,
25       default: '#c532a3'
26     },
27     inactivetext: {
28       type: string,
29       default: 'off'
30     },
31     inactivecolor: {
32       type: string,
33       default: 'yellow'
34     }
35   },
36   data () {
37     return {
38       activestate: this.active
39     }
40   },
41   methods: {
42     toggle () {
43       this.activestate = !this.activestate
44     }
45   }
46 }
47 </script>
48 
49 <style lang="scss" scoped>
50 .switch{
51   display: inline-block;
52   border-radius: 15px;
53   box-sizing: border-box;
54   overflow: hidden;
55   & > div{
56     float: left;
57   }
58   .switch-text{
59     height: 28px;
60     line-height: 28px;
61     color: #ffffff;
62     font-size: 14px;
63     padding: 0 8px;
64   }
65   .switch-icon{
66     width: 26px;
67     height: 26px;
68     border-radius: 13px;
69     background-color: #ffffff;
70     border-radius: 1px solid #dcdcdc;
71     margin: 1px;
72   }
73 }
74 </style>

代码如上，引用自己引用下