Commit 84549fcf882cd7b4e2be9f5fb7515ad21c792de3
Committed by
GitHub
GitHub
Merge pull request #2677 from lison16/2.0
fixed the bug about backgroundcolor when tag is checked
Showing
2 changed files
with
12 additions
and
3 deletions
Show diff stats
examples/routers/tag.vue
| ... | ... | @@ -14,7 +14,13 @@ |
| 14 | 14 | <Tag closable color="red" checkable>标签三</Tag> |
| 15 | 15 | <Tag closable color="yellow" checkable>标签四</Tag> |
| 16 | 16 | <br><br> |
| 17 | + <Tag color="blue" checkable>标签一</Tag> | |
| 18 | + <Tag color="green" checkable>标签二</Tag> | |
| 19 | + <Tag color="red" checkable>标签三</Tag> | |
| 20 | + <Tag color="yellow" checkable>标签四</Tag> | |
| 21 | + <br><br> | |
| 17 | 22 | <Tag closable color="#EF6AFF" checkable>标签一</Tag> |
| 23 | + <Tag color="#EF6AFF" checkable>标签一</Tag> | |
| 18 | 24 | <Tag type="border" closable color="#EF6AFF" checkable>标签二</Tag> |
| 19 | 25 | <Tag type="dot" closable color="#EF6AFF" checkable>标签三</Tag> |
| 20 | 26 | <Tag closable color="default" checkable>标签四</Tag> | ... | ... |
src/components/tag/tag.vue
| ... | ... | @@ -59,13 +59,13 @@ |
| 59 | 59 | ]; |
| 60 | 60 | }, |
| 61 | 61 | wraperStyles () { |
| 62 | - return oneOf(this.color, initColorList) ? {} : {background: this.defaultTypeColor, borderColor: this.lineColor, color: this.lineColor}; | |
| 62 | + return oneOf(this.color, initColorList) ? {} : {background: this.isChecked ? this.defaultTypeColor : 'transparent', borderWidth: '1px', borderStyle: 'solid', borderColor: ((this.type !== 'dot' && this.type !== 'border' && this.isChecked) ? this.borderColor : this.lineColor), color: this.lineColor}; | |
| 63 | 63 | }, |
| 64 | 64 | textClasses () { |
| 65 | 65 | return [ |
| 66 | 66 | `${prefixCls}-text`, |
| 67 | 67 | this.type === 'border' ? (oneOf(this.color, initColorList) ? `${prefixCls}-color-${this.color}` : '') : '', |
| 68 | - (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? `${prefixCls}-color-white` : '' | |
| 68 | + (this.type !== 'dot' && this.type !== 'border' && this.color !== 'default') ? (this.isChecked ? `${prefixCls}-color-white` : '') : '' | |
| 69 | 69 | ]; |
| 70 | 70 | }, |
| 71 | 71 | dotClasses () { |
| ... | ... | @@ -92,11 +92,14 @@ |
| 92 | 92 | return this.color !== undefined ? (this.color === 'default' ? '' : 'rgb(255, 255, 255)') : ''; |
| 93 | 93 | } |
| 94 | 94 | }, |
| 95 | + borderColor () { | |
| 96 | + return this.color !== undefined ? (this.color === 'default' ? '' : this.color) : ''; | |
| 97 | + }, | |
| 95 | 98 | dotColor () { |
| 96 | 99 | return this.color !== undefined ? (oneOf(this.color, initColorList) ? '' : this.color) : ''; |
| 97 | 100 | }, |
| 98 | 101 | textColorStyle () { |
| 99 | - return oneOf(this.color, initColorList) ? {} : {color: this.lineColor}; | |
| 102 | + return oneOf(this.color, initColorList) ? {} : ((this.type !== 'dot' && this.type !== 'border') ? (this.isChecked ? {color: this.lineColor} : {}) : {color: this.lineColor}); | |
| 100 | 103 | }, |
| 101 | 104 | bgColorStyle () { |
| 102 | 105 | return oneOf(this.color, initColorList) ? {} : {background: this.dotColor}; | ... | ... |