|
|
<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>
|
|
|
<p v-if="text" class="icon-btn-text" :style="textStyle">
|
|
|
<span class="view-text">{{viewText}}</span>
|
|
|
<span class="placeholder-text">{{text}}</span>
|
|
|
</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
...
|
...
|
@@ -56,7 +59,8 @@ |
|
|
data() {
|
|
|
return {
|
|
|
btnSelected: false,
|
|
|
actionClass: ''
|
|
|
actionClass: '',
|
|
|
editText: null
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
...
|
...
|
@@ -101,6 +105,9 @@ |
|
|
}
|
|
|
|
|
|
return style;
|
|
|
},
|
|
|
viewText() {
|
|
|
return this.editText === null ? this.text : this.editText;
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
...
|
...
|
@@ -108,8 +115,10 @@ |
|
|
if (this.option.canSelect) {
|
|
|
this.btnSelected = !this.btnSelected;
|
|
|
|
|
|
if (Number(this.text) !== NaN) {
|
|
|
this.text = Number(this.text) + (this.btnSelected ? 1 : -1);
|
|
|
let _text = this.editText || this.text;
|
|
|
|
|
|
if (Number(this.viewText) !== NaN) {
|
|
|
this.editText = Number(this.viewText) + (this.btnSelected ? 1 : -1);
|
|
|
}
|
|
|
|
|
|
if (this._icon.selected) {
|
...
|
...
|
@@ -136,6 +145,15 @@ |
|
|
|
|
|
.icon-btn-text {
|
|
|
line-height: 1.3;
|
|
|
position: relative;
|
|
|
|
|
|
.view-text {
|
|
|
position: absolute;
|
|
|
}
|
|
|
|
|
|
.placeholder-text {
|
|
|
opacity: 0;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |
...
|
...
|
|