1.lilo-icon-button 一般按钮模式：
1 <template>
2 <div class="icon-button" :style="{ color: font.color }" @click="onclick">
3 <i :class="[icon.type]" :style="{ color: icon.color, fontSize: icon.size }" class="right" v-if="showIcon"></i>
4 <slot>
5 <span class="text" :style="{ fontSize: font.size }">{{ title }}</span>
6 </slot>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'LiloIconButton',
13 props: {
14 title: {
15 type: String,
16 default: '',
17 required: false
18 },
19 showIcon: {
20 type: Boolean,
21 default: true
22 },
23 icon: {
24 type: Object,
25 default() {
26 return {
27 type: 'el-icon-setting',
28 size: '1em',
29 color: '#00417a'
30 };
31 },
32 required: false
33 },
34 font: {
35 type: Object,
36 default() {
37 return {
38 size: '1em',
39 color: '#00417a'
40 };
41 },
42 required: false
43 }
44 },
45 data() {
46 return {
47 selected: true
48 };
49 },
50 methods: {
51 onclick() {
52 this.selected = !this.selected;
53 this.$emit('toggle', this.selected);
54 }
55 }
56 };
57 </script>
58
59 <style lang="scss" scoped>
60
61 $blue: #00417a;
62
63 .icon-button {
64 -webkit-transition: all 0.3s ease 0s;
65 transition: all 0.3s ease 0s;
66 cursor: pointer;
67 text-align: center;
68 display: inline-block;
69 -moz-user-select: none;
70 -webkit-user-select: none;
71 user-select: none;
72 .right{
73 margin-right: 3px;
74 }
75 &:after {
76 content: ' ';
77 // position: absolute;
78 z-index: 2;
79 // bottom: -5px;
80 margin-left: 50%;
81 margin-top: 2px;
82 display: block;
83 width: 100%;
84 height: 2px;
85 transform: translate(-50%);
86 }
87 &:hover:after {
88 height: 2px;
89 animation: add_width 0.2s ease forwards;
90 background: $blue;
91 }
92 @keyframes add_width {
93 from {
94 width: 0;
95 }
96 to {
97 width: 100%;
98 }
99 }
100 .text {
101 letter-spacing: 1px;
102 }
103 }
104 </style>
2.lilo-icon-switcher 开关切换按钮模式：
1 <template>
2 <div class="icon-switcher" :style="{ color: font.color }" :class="[selected ? 'active' : 'deactive']" @click="onclick">
3 <i :class="[icon.type]" :style="{ color: icon.color, fontSize: icon.size }" class="right"></i>
4 <slot>
5 <span class="text" :style="{ fontSize: font.size }">{{ title }}</span>
6 </slot>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'LiloIconSwitcher',
13 props: {
14 title: {
15 type: String,
16 default: '',
17 required: false
18 },
19 icon: {
20 type: Object,
21 default() {
22 return {
23 type: 'el-icon-setting',
24 size: '1em',
25 color: '#00417a'
26 };
27 },
28 required: false
29 },
30 font: {
31 type: Object,
32 default() {
33 return {
34 size: '1em',
35 color: '#00417a'
36 };
37 },
38 required: false
39 },
40 checked: {
41 type: Boolean,
42 default: false,
43 required: false
44 }
45 },
46 data() {
47 return {
48 selected: this.checked
49 };
50 },
51 methods: {
52 onclick() {
53 this.selected = !this.selected;
54 this.$emit('toggle', this.selected);
55 }
56 }
57 };
58 </script>
59
60 <style lang="scss" scoped>
61
62 $blue: #00417a;
63
64 .icon-switcher {
65 -webkit-transition: all 0.3s ease 0s;
66 transition: all 0.3s ease 0s;
67 cursor: pointer;
68 text-align: center;
69 display: inline-block;
70 -moz-user-select: none;
71 -webkit-user-select: none;
72 user-select: none;
73 .right {
74 margin-right: 3px;
75 }
76 &.active {
77 &:after {
78 content: ' ';
79 z-index: 2;
80 margin-left: 50%;
81 margin-top: 2px;
82 display: block;
83 width: 100%;
84 height: 2px;
85 transform: translate(-50%);
86 background: $blue;
87 }
88 }
89 &.deactive {
90 &:after {
91 content: ' ';
92 z-index: 2;
93 margin-left: 50%;
94 margin-top: 2px;
95 display: block;
96 width: 100%;
97 height: 2px;
98 transform: translate(-50%);
99 }
100 }
101 &:hover:after {
102 height: 2px;
103 animation: add_width 0.2s ease forwards;
104 background: $blue;
105 }
106 @keyframes add_width {
107 from {
108 width: 0;
109 }
110 to {
111 width: 100%;
112 }
113 }
114 .text {
115 letter-spacing: 1px;
116 }
117 }
118
119 </style>
调用示例：
1 <div class="mt-10">
2 <lilo-icon-button class="mr-10" title="简单按钮"></lilo-icon-button>
3 <lilo-icon-button class="mr-10"><span>我是一个插槽</span></lilo-icon-button>
4 <lilo-icon-button
5 class="mr-10"
6 title="自定义按钮"
7 :icon="{ type: 'el-icon-upload', color: '#f56c6c', size: '1rem' }"
8 :font="{ color: '#5500ff', size: '1rem' }"
9 @toggle="toggle"
10 ></lilo-icon-button>
11 <lilo-icon-button class="mr-10" :showIcon="false"><span>不需要图标</span></lilo-icon-button>
12 </div>
13 <div class="mt-10">
14 <lilo-icon-switcher class="mr-10" title="切换按钮"></lilo-icon-switcher>
15 <lilo-icon-switcher class="mr-10"><span>我也是一个插槽</span></lilo-icon-switcher>
16 <lilo-icon-switcher
17 class="mr-10"
18 title="自定义切换按钮"
19 :icon="{ type: 'el-icon-loading', color: '#005500', size: '1rem' }"
20 :font="{ color: '#5500ff', size: '1rem' }"
21 :checked="true"
22 @toggle="toggle"
23 ></lilo-icon-switcher>
24 <lilo-icon-button class="mr-10" :showIcon="false"><span>不需要图标</span></lilo-icon-button>
25 </div>
效果图：
标签：width,default,2px,selected,模式,动态效果,按钮,type,icon From： https://www.cnblogs.com/loveFlex/p/17653839.html