diff --git a/examples/routers/tag.vue b/examples/routers/tag.vue index 330f061..f29306f 100644 --- a/examples/routers/tag.vue +++ b/examples/routers/tag.vue @@ -1,27 +1,55 @@ <template> <div> - <Tag v-for="item in count" :key="item" :name="item" type="border" color="yellow" @on-close="close" @on-check="check" closable>标签{{ item + 1 }}</Tag> - <div><Tag v-for="item in count" :key="item" :name="item" color="yellow" @on-close="close" @on-check="check" checkable>可选标签{{ item + 1 }}</Tag></div> - <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> - <br /> - <Button icon="ios-plus-empty" type="dashed" size="small" @click="count += 1">添加标签</Button> + <Tag checkable>标签一</Tag> + <Tag>标签二</Tag> + <Tag v-if="show" closable @on-close="handleClose">标签三</Tag> + <br><br> + <Tag type="border" checkable>标签三</Tag> + <Tag type="border" closable>标签四</Tag> + <Tag type="dot">标签一</Tag> + <Tag type="dot" closable>标签二</Tag> + <br><br> + <Tag closable color="blue" checkable>标签一</Tag> + <Tag closable color="green" checkable>标签二</Tag> + <Tag closable color="red" checkable>标签三</Tag> + <Tag closable color="yellow" checkable>标签四</Tag> + <br><br> + <Tag type="border" closable color="blue" checkable>标签一</Tag> + <Tag type="border" closable color="green">标签二</Tag> + <Tag type="border" closable color="red">标签三</Tag> + <Tag type="border" closable color="yellow">标签四</Tag> + <br><br> + <Tag type="dot" closable color="blue" checkable>标签一</Tag> + <Tag type="dot" closable color="green">标签二</Tag> + <Tag type="dot" closable color="red">标签三</Tag> + <Tag type="dot" closable color="yellow">标签四</Tag> + <br><br> + <Tag v-for="item in count" :key="item" :name="item" closable @on-close="handleClose2">标签{{ item + 1 }}</Tag> + <Button icon="ios-plus-empty" type="dashed" size="small" @click="handleAdd">添加标签</Button> </div> </template> <script> export default { data () { return { - count: 3 + show: true, + count: [0, 1, 2] }; }, methods: { - close (e, name) { - console.log(e); - console.log(name); + handleClose () { + this.show = false; }, - check (e, name) { - console.log(e); - console.log(name); + handleAdd () { + if (this.count.length) { + this.count.push(this.count[this.count.length - 1] + 1); + } else { + this.count.push(0); + } + }, + handleClose2 (event, name) { + const index = this.count.indexOf(name); + this.count.splice(index, 1); } } }; diff --git a/src/components/tag/tag.vue b/src/components/tag/tag.vue index 79a76b0..1acc31f 100644 --- a/src/components/tag/tag.vue +++ b/src/components/tag/tag.vue @@ -51,7 +51,7 @@ return [ `${prefixCls}`, { - [`${prefixCls}-${this.color}`]: !!this.color && (this.checkable && this.isChecked), + [`${prefixCls}-${this.color}`]: !!this.color, [`${prefixCls}-${this.type}`]: !!this.type, [`${prefixCls}-closable`]: this.closable, [`${prefixCls}-checked`]: this.isChecked diff --git a/src/styles/components/tag.less b/src/styles/components/tag.less index 725227a..5f91969 100644 --- a/src/styles/components/tag.less +++ b/src/styles/components/tag.less @@ -21,6 +21,10 @@ &:not(&-border):not(&-dot):not(&-checked){ background: transparent; border: 0; + color: @text-color; + .@{tag-close-prefix-cls} { + color: @text-color !important; + } } &-dot{ -- libgit2 0.21.4