自定义 vue switch 组件

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

新老客户大回馈,云服务器低至5折

 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>

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:撩课-Web大前端每天5道面试题-Day22

下一篇:社会主义核心价值观,桌面鼠标点击特效