自定义 vue switch 组件

2019-01-01 23:17:49来源：博客园阅读 ()

 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>