我要评论 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>
代码如上，引用自己引用下
如对本文有疑问， 点击进行留言回复！！
elementui更改el-dialog关闭按钮的图标d的示例代码
网友评论