fixed the bug about backgroundcolor when tag is checked

zhigang.li
1 parent c907cc97
Showing 2 changed files with 9 additions and 3 deletions Show diff stats
examples/routers/tag.vue
src/components/tag/tag.vue
@@ -14,7 +14,13 @@
         <Tag closable color="red" checkable>标签三</Tag>
         <Tag closable color="yellow" checkable>标签四</Tag>
         <br><br>
+        <Tag color="blue" checkable>标签一</Tag>
+        <Tag color="green" checkable>标签二</Tag>
+        <Tag color="red" checkable>标签三</Tag>
+        <Tag color="yellow" checkable>标签四</Tag>
+        <br><br>
         <Tag closable color="#EF6AFF" checkable>标签一</Tag>
+        <Tag color="#EF6AFF" checkable>标签一</Tag>
         <Tag type="border" closable color="#EF6AFF" checkable>标签二</Tag>
         <Tag type="dot" closable color="#EF6AFF" checkable>标签三</Tag>
         <Tag closable color="default" checkable>标签四</Tag>
@@ -59,13 +59,13 @@
                 ];
             },
             wraperStyles () {
-                return oneOf(this.color, initColorList) ? {} : {background: this.defaultTypeColor, borderColor: this.lineColor, color: this.lineColor};
+                return oneOf(this.color, initColorList) ? {} : {background: this.isChecked ? this.defaultTypeColor : 'transparent', borderWidth: '1px', borderStyle: 'solid', borderColor: this.lineColor, color: this.lineColor};
             },
             textClasses () {
                 return [
                     `${prefixCls}-text`,
                     this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '',
-                    (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? `${prefixCls}-color-white` : ''
+                    (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked ? `${prefixCls}-color-white` : '') : ''
                 ];
             },
             dotClasses () {
@@ -96,7 +96,7 @@
                 return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : '';
             },
             textColorStyle () {
-                return oneOf(this.color, initColorList) ? {} : {color: this.lineColor};
+                return oneOf(this.color, initColorList) ? {} : ((this.type !== 'dot' && this.type !== 'border') ? (this.isChecked ? {color: this.lineColor} : {}) : {color: this.lineColor});
             },
             bgColorStyle () {
                 return oneOf(this.color, initColorList) ? {} : {background: this.dotColor};