...
|
...
|
@@ -68,7 +68,7 @@ |
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
|
|
|
viewOption: {},
|
|
|
btnSelected: false,
|
|
|
actionClass: '',
|
|
|
editText: null
|
...
|
...
|
@@ -76,16 +76,17 @@ |
|
|
},
|
|
|
created() {
|
|
|
forEach(defaultOption, (value, key) => {
|
|
|
if (!this.option.hasOwnProperty(key)) {
|
|
|
this.option[key] = value;
|
|
|
if (!this.viewOption.hasOwnProperty(key)) {
|
|
|
this.viewOption[key] = this.option.hasOwnProperty(key) ? this.option[key] : defaultOption[key];
|
|
|
}
|
|
|
});
|
|
|
this.viewOption = {...this.viewOption};
|
|
|
},
|
|
|
computed: {
|
|
|
btnStyle() {
|
|
|
let color = this.option.color || defaultOption.color;
|
|
|
let color = this.viewOption.color || defaultOption.color;
|
|
|
|
|
|
return `color: ${this.btnSelected ? (this.option.selectedColor || color) : color};`;
|
|
|
return `color: ${this.btnSelected ? (this.viewOption.selectedColor || color) : color};`;
|
|
|
},
|
|
|
iconClass() {
|
|
|
if (this.actionClass) {
|
...
|
...
|
@@ -97,7 +98,7 @@ |
|
|
this._icon = classMap[this._type];
|
|
|
}
|
|
|
|
|
|
if (this.option.selected) {
|
|
|
if (this.viewOption.selected) {
|
|
|
this.btnSelected = true;
|
|
|
|
|
|
return this._icon.selected || this._icon.default;
|
...
|
...
|
@@ -106,25 +107,25 @@ |
|
|
return this._icon.default;
|
|
|
},
|
|
|
iconStyle() {
|
|
|
return `font-size: ${this.pxToRem(this.option.iconFontSize)};`;
|
|
|
return `font-size: ${this.pxToRem(this.viewOption.iconFontSize)};`;
|
|
|
},
|
|
|
textStyle() {
|
|
|
let style = `font-size: ${this.pxToRem(this.option.textFontSize)};`;
|
|
|
let style = `font-size: ${this.pxToRem(this.viewOption.textFontSize)};`;
|
|
|
|
|
|
let textAlign = this.option.textAlign;
|
|
|
let textAlign = this.viewOption.textAlign;
|
|
|
|
|
|
if (['top', 'bottom'].indexOf(textAlign) >= 0) {
|
|
|
style += ` vertical-align: ${textAlign};`;
|
|
|
}
|
|
|
|
|
|
let textZoom = this.option.textZoom;
|
|
|
let textZoom = this.viewOption.textZoom;
|
|
|
|
|
|
if (Number(textZoom) !== NaN) {
|
|
|
style += ` transform: scale(${textZoom}, ${textZoom});`
|
|
|
}
|
|
|
|
|
|
if (this.option.textSelectedColor) {
|
|
|
style += ` color: ${this.option.textSelectedColor};`
|
|
|
if (this.viewOption.textSelectedColor) {
|
|
|
style += ` color: ${this.viewOption.textSelectedColor};`
|
|
|
}
|
|
|
|
|
|
return style;
|
...
|
...
|
@@ -158,7 +159,7 @@ |
|
|
changeBtnStatus() {
|
|
|
this.btnSelected = !this.btnSelected;
|
|
|
|
|
|
if (this.option.textAutoChange) {
|
|
|
if (this.viewOption.textAutoChange) {
|
|
|
let _text = this.editText || this.text;
|
|
|
|
|
|
if (!isNaN(Number(this.viewText))) {
|
...
|
...
|
@@ -182,7 +183,7 @@ |
|
|
return;
|
|
|
}
|
|
|
|
|
|
if (this.option.canSelect) {
|
|
|
if (this.viewOption.canSelect) {
|
|
|
this.changeBtnStatus();
|
|
|
|
|
|
let syncFnName = '';
|
...
|
...
|
@@ -227,7 +228,7 @@ |
|
|
}
|
|
|
}
|
|
|
|
|
|
this.option.emitName && this.$emit(this.option.emitName, evt);
|
|
|
this.viewOption.emitName && this.$emit(this.viewOption.emitName, evt);
|
|
|
}
|
|
|
},
|
|
|
};
|
...
|
...
|
|