自定义 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>
代码如上,引用自己引用下