Commit 2079c47bb3ab559aa3f9543d8e99a718e9f72623
1 parent
2993f4ee
update Tag
Showing
3 changed files
with
45 additions
and
13 deletions
Show diff stats
examples/routers/tag.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable>标签{{ item + 1 }}</Tag> | ||
| 4 | - <div><Tag v-for="item in count" :key="item" :name="item" color="yellow" @on-close="close" @on-check="check" checkable>可选标签{{ item + 1 }}</Tag></div> | ||
| 5 | - <div><Tag v-for="item in count" :key="item" :name="item" type="dot" color="blue" @on-close="close" @on-check="check" closable checkable>可选可关闭标签{{ item + 1 }}</Tag></div> | ||
| 6 | - <br /> | ||
| 7 | - <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button> | 3 | + <Tag checkable>标签一</Tag> |
| 4 | + <Tag>标签二</Tag> | ||
| 5 | + <Tag v-if="show" closable @on-close="handleClose">标签三</Tag> | ||
| 6 | + <br><br> | ||
| 7 | + <Tag type="border" checkable>标签三</Tag> | ||
| 8 | + <Tag type="border" closable>标签四</Tag> | ||
| 9 | + <Tag type="dot">标签一</Tag> | ||
| 10 | + <Tag type="dot" closable>标签二</Tag> | ||
| 11 | + <br><br> | ||
| 12 | + <Tag closable color="blue" checkable>标签一</Tag> | ||
| 13 | + <Tag closable color="green" checkable>标签二</Tag> | ||
| 14 | + <Tag closable color="red" checkable>标签三</Tag> | ||
| 15 | + <Tag closable color="yellow" checkable>标签四</Tag> | ||
| 16 | + <br><br> | ||
| 17 | + <Tag type="border" closable color="blue" checkable>标签一</Tag> | ||
| 18 | + <Tag type="border" closable color="green">标签二</Tag> | ||
| 19 | + <Tag type="border" closable color="red">标签三</Tag> | ||
| 20 | + <Tag type="border" closable color="yellow">标签四</Tag> | ||
| 21 | + <br><br> | ||
| 22 | + <Tag type="dot" closable color="blue" checkable>标签一</Tag> | ||
| 23 | + <Tag type="dot" closable color="green">标签二</Tag> | ||
| 24 | + <Tag type="dot" closable color="red">标签三</Tag> | ||
| 25 | + <Tag type="dot" closable color="yellow">标签四</Tag> | ||
| 26 | + <br><br> | ||
| 27 | + <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag> | ||
| 28 | + <Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button> | ||
| 8 | </div> | 29 | </div> |
| 9 | </template> | 30 | </template> |
| 10 | <script> | 31 | <script> |
| 11 | export default { | 32 | export default { |
| 12 | data () { | 33 | data () { |
| 13 | return { | 34 | return { |
| 14 | - count: 3 | 35 | + show: true, |
| 36 | + count: [0, 1, 2] | ||
| 15 | }; | 37 | }; |
| 16 | }, | 38 | }, |
| 17 | methods: { | 39 | methods: { |
| 18 | - close (e, name) { | ||
| 19 | - console.log(e); | ||
| 20 | - console.log(name); | 40 | + handleClose () { |
| 41 | + this.show = false; | ||
| 21 | }, | 42 | }, |
| 22 | - check (e, name) { | ||
| 23 | - console.log(e); | ||
| 24 | - console.log(name); | 43 | + handleAdd () { |
| 44 | + if (this.count.length) { | ||
| 45 | + this.count.push(this.count[this.count.length - 1] + 1); | ||
| 46 | + } else { | ||
| 47 | + this.count.push(0); | ||
| 48 | + } | ||
| 49 | + }, | ||
| 50 | + handleClose2 (event, name) { | ||
| 51 | + const index = this.count.indexOf(name); | ||
| 52 | + this.count.splice(index, 1); | ||
| 25 | } | 53 | } |
| 26 | } | 54 | } |
| 27 | }; | 55 | }; |
src/components/tag/tag.vue
| @@ -51,7 +51,7 @@ | @@ -51,7 +51,7 @@ | ||
| 51 | return [ | 51 | return [ |
| 52 | `${prefixCls}`, | 52 | `${prefixCls}`, |
| 53 | { | 53 | { |
| 54 | - [`${prefixCls}-${this.color}`]: !!this.color && (this.checkable && this.isChecked), | 54 | + [`${prefixCls}-${this.color}`]: !!this.color, |
| 55 | [`${prefixCls}-${this.type}`]: !!this.type, | 55 | [`${prefixCls}-${this.type}`]: !!this.type, |
| 56 | [`${prefixCls}-closable`]: this.closable, | 56 | [`${prefixCls}-closable`]: this.closable, |
| 57 | [`${prefixCls}-checked`]: this.isChecked | 57 | [`${prefixCls}-checked`]: this.isChecked |
src/styles/components/tag.less
| @@ -21,6 +21,10 @@ | @@ -21,6 +21,10 @@ | ||
| 21 | &:not(&-border):not(&-dot):not(&-checked){ | 21 | &:not(&-border):not(&-dot):not(&-checked){ |
| 22 | background: transparent; | 22 | background: transparent; |
| 23 | border: 0; | 23 | border: 0; |
| 24 | + color: @text-color; | ||
| 25 | + .@{tag-close-prefix-cls} { | ||
| 26 | + color: @text-color !important; | ||
| 27 | + } | ||
| 24 | } | 28 | } |
| 25 | 29 | ||
| 26 | &-dot{ | 30 | &-dot{ |