widget-icon-btn.vue
3.59 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<template>
<div class="icon-btn" @click="onClick" :style="btnStyle">
<i class="iconfont" :class="iconClass" :style="iconStyle"></i>
<span v-if="text" class="icon-btn-text" :style="textStyle">{{text}}</span>
</div>
</template>
<script>
import { pxToRem } from '../../../utils/helpers.js';
const classMap = {
fav: {
default: 'icon-zan',
selected: 'icon-zan-fill'
},
star: {
default: 'icon-star',
selected: 'icon-star-fill'
},
share: {
default: 'icon-share'
},
msg: {
default: 'icon-msg'
}
};
const defaultOption = {
canSelect: true, // 是否支持选中
selected: false, // 初始选中状态（不受是否支持选中控制）
color: '#444', // btn字体颜色
selectedColor: '#444', // btn选中状态字体颜色（不设置默认与非选中一致）
iconFontSize: 48, // icon字号（单位px）
textFontSize: 20, // text字号（单位px）
textAlign: 'top', // text位置, 默认normal（支持normal, top, bottom）
textZoom: 0.9, // text缩放
textAutoChange: false, // text自动增减，只支持number类型（受是否支持选中控制）
emitName: '' // 点击触发事件名称
};
export default {
name: 'WidgetIconBtn',
props: {
type: {
type: String,
default: 'fav'
},
text: String,
option: {
type: Object,
default() {
return defaultOption;
}
}
},
data() {
return {
btnSelected: false,
actionClass: ''
}
},
computed: {
btnStyle() {
let color = this.option.color || defaultOption.color;
return `color: ${this.btnSelected ? (this.option.selectedColor || color) : color};`;
},
iconClass() {
if (this.actionClass) {
return this.actionClass;
}
if (!this.iconObj) {
this._icon = classMap[this.type] || classMap.fav;
}
if (this.option.selected) {
this.btnSelected = true;
return this._icon.selected || this._icon.default;
}
return this._icon.default;
},
iconStyle() {
return `font-size: ${pxToRem(this.option.iconFontSize || defaultOption.iconFontSize)};`;
},
textStyle() {
let style = `font-size: ${pxToRem(this.option.textFontSize || defaultOption.textFontSize)};`;
if (['top', 'bottom'].indexOf(this.option.textAlign) >= 0) {
style += ` vertical-align: ${this.option.textAlign};`;
}
if (Number(this.option.textZoom) !== NaN) {
style += `transform: scale(${this.option.textZoom}, ${this.option.textZoom});`
}
return style;
}
},
methods: {
onClick(evt) {
if (this.option.canSelect) {
this.btnSelected = !this.btnSelected;
if (Number(this.text) !== NaN) {
this.text = Number(this.text) + (this.btnSelected ? 1 : -1);
}
if (this._icon.selected) {
this.actionClass = this.btnSelected ? this._icon.selected : this._icon.default;
}
}
this.option.emitName && this.$emit(this.option.emitName, evt);
}
},
};
</script>
<style type="scss">
.icon-btn {
display: inline-block;
line-height: 1;
vertical-align: middle;
> * {
display: inline-block;
vertical-align: middle;
}
.icon-btn-text {
line-height: 1.3;
}
}
</style>