diff --git a/src/tag/README.md b/src/tag/README.md index a93837745..df2ac0858 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -21,16 +21,6 @@ Vue.use(Tag); Tag ``` -### Plain style - -```html -Tag -Tag -Tag -Tag -Tag -``` - ### Round style ```html @@ -51,6 +41,16 @@ Vue.use(Tag); Tag ``` +### Plain style + +```html +Tag +Tag +Tag +Tag +Tag +``` + ### Custom Color ```html @@ -69,6 +69,45 @@ Vue.use(Tag); Tag ``` +### Closeable + +```html + + Tag + + + Tag + +``` + +```js +export default { + data() { + return { + show: { + primary: true, + success: true + } + } + }, + methods: { + close(type) { + this.show[type] = false; + } + } +} +``` + ## API ### Props @@ -82,6 +121,7 @@ Vue.use(Tag); | round | Whether to be round style | *boolean* | `false` | - | | mark | Whether to be mark style | *boolean* | `false` | - | | text-color | Text color | *string* | `white` | - | +| closeable | Whether to be closeable | *boolean* | `false` | 2.2.9 | ### Slots @@ -94,3 +134,4 @@ Vue.use(Tag); | Event | Description | Arguments | |------|------|------| | click | Triggered when clicked | event: Event | +| close | Triggered when click close icon | - | diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md index 30102c67d..5d37bc856 100644 --- a/src/tag/README.zh-CN.md +++ b/src/tag/README.zh-CN.md @@ -23,18 +23,6 @@ Vue.use(Tag); 标签 ``` -### 空心样式 - -设置`plain`属性设置为空心样式 - -```html -标签 -标签 -标签 -标签 -标签 -``` - ### 圆角样式 通过`round`设置为圆角样式 @@ -59,6 +47,18 @@ Vue.use(Tag); 标签 ``` +### 空心样式 + +设置`plain`属性设置为空心样式 + +```html +标签 +标签 +标签 +标签 +标签 +``` + ### 自定义颜色 ```html @@ -77,6 +77,47 @@ Vue.use(Tag); 标签 ``` +### 可关闭标签 + +添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑 + +```html + + 标签 + + + 标签 + +``` + +```js +export default { + data() { + return { + show: { + primary: true, + success: true + } + } + }, + methods: { + close(type) { + this.show[type] = false; + } + } +} +``` + ## API ### Props @@ -90,15 +131,17 @@ Vue.use(Tag); | round | 是否为圆角样式 | *boolean* | `false` | - | | mark | 是否为标记样式 | *boolean* | `false` | - | | text-color | 文本颜色，优先级高于`color`属性 | *string* | `white` | - | +| closeable | 是否为可关闭标签 | *boolean* | `false` | 2.2.9 | ### Slots | 名称 | 说明 | |------|------| -| default | 自定义 Tag 显示内容 | +| default | 标签显示内容 | ### Events | 事件名 | 说明 | 回调参数 | |------|------|------| | click | 点击时触发 | event: Event | +| close | 关闭标签时触发 | - | diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue index b1aee9d66..393dd29d3 100644 --- a/src/tag/demo/index.vue +++ b/src/tag/demo/index.vue @@ -8,14 +8,6 @@ {{ $t('tag') }} - - {{ $t('tag') }} - {{ $t('tag') }} - {{ $t('tag') }} - {{ $t('tag') }} - {{ $t('tag') }} - - {{ $t('tag') }} {{ $t('tag') }} @@ -32,6 +24,14 @@ {{ $t('tag') }} + + {{ $t('tag') }} + {{ $t('tag') }} + {{ $t('tag') }} + {{ $t('tag') }} + {{ $t('tag') }} + + {{ $t('tag') }} {{ $t('tag') }} @@ -41,9 +41,30 @@ - {{ $t('tag') }} - {{ $t('tag') }} - {{ $t('tag') }} + {{ $t('tag') }} + {{ $t('tag') }} + {{ $t('tag') }} + + + + + {{ $t('tag') }} + + + {{ $t('tag') }} + @@ -55,6 +76,7 @@ export default { plain: '空心样式', round: '圆角样式', mark: '标记样式', + closeable: '可关闭标签', customColor: '自定义颜色', customSize: '标签大小' }, @@ -62,9 +84,25 @@ export default { plain: 'Plain style', round: 'Round style', mark: 'Mark style', + closeable: 'Closeable', customColor: 'Custom Color', customSize: 'Custom Size' } + }, + + data() { + return { + show: { + primary: true, + success: true + } + }; + }, + + methods: { + close(tag) { + this.show[tag] = false; + } } }; diff --git a/src/tag/index.less b/src/tag/index.less index 4bd4b729f..88d6cfae7 100644 --- a/src/tag/index.less +++ b/src/tag/index.less @@ -1,7 +1,8 @@ @import '../style/var'; .van-tag { - display: inline-block; + display: inline-flex; + align-items: center; padding: @tag-padding; color: @tag-text-color; font-size: @tag-font-size; @@ -58,19 +59,18 @@ } &--mark { - padding-right: .6em; - border-radius: 0 .8em .8em 0; + padding-right: .7em; + &, &::after { - border-radius: 0 1.6em 1.6em 0; + border-radius: 0 @tag-round-border-radius @tag-round-border-radius 0; } } &--round { - border-radius: @tag-round-border-radius; - + &, &::after { - border-radius: @tag-round-border-radius * 2; + border-radius: @tag-round-border-radius; } } @@ -81,4 +81,8 @@ &--large { font-size: @tag-large-font-size; } + + &__close { + margin-left: 2px; + } } diff --git a/src/tag/index.tsx b/src/tag/index.tsx index 203116efb..2e114d1c9 100644 --- a/src/tag/index.tsx +++ b/src/tag/index.tsx @@ -1,6 +1,7 @@ import { createNamespace } from '../utils'; -import { inherit } from '../utils/functional'; +import { inherit, emit } from '../utils/functional'; import { BORDER_SURROUND } from '../utils/constant'; +import Icon from '../icon'; // Types import { CreateElement, RenderContext } from 'vue/types'; @@ -18,6 +19,7 @@ export type TagProps = { plain?: boolean; round?: boolean; textColor?: string; + closeable?: boolean; }; const [createComponent, bem] = createNamespace('tag'); @@ -42,18 +44,30 @@ function Tag( classes[size] = size; } - return ( + const Content = ( {slots.default && slots.default()} + {props.closeable && ( + { + emit(ctx, 'close'); + }} + /> + )} ); + + if (props.closeable) { + return {Content}; + } + + return Content; } Tag.props = { @@ -63,6 +77,7 @@ Tag.props = { plain: Boolean, round: Boolean, textColor: String, + closeable: Boolean, type: { type: String, default: 'default' diff --git a/src/tag/test/__snapshots__/demo.spec.js.snap b/src/tag/test/__snapshots__/demo.spec.js.snap index 20bb0c0ce..622597aba 100644 --- a/src/tag/test/__snapshots__/demo.spec.js.snap +++ b/src/tag/test/__snapshots__/demo.spec.js.snap @@ -3,10 +3,15 @@ exports[`renders demo correctly 1`] = `
标签 标签 标签 标签 标签
-
标签 标签 标签 标签 标签
标签 标签 标签 标签 标签
标签 标签 标签 标签 标签
+
标签 标签 标签 标签 标签
标签 标签 标签 标签 标签
-
标签 标签 标签
+
标签 标签 标签
+
+ 标签 + + 标签 +
`; diff --git a/src/tag/test/index.spec.js b/src/tag/test/index.spec.js index cd3598103..2da20703c 100644 --- a/src/tag/test/index.spec.js +++ b/src/tag/test/index.spec.js @@ -14,3 +14,20 @@ test('click event', () => { wrapper.trigger('click'); expect(click).toHaveBeenCalledTimes(1); }); + +test('close event', () => { + const close = jest.fn(); + const wrapper = mount(Tag, { + propsData: { + closeable: true + }, + context: { + on: { + close + } + } + }); + + wrapper.find('.van-tag__close').trigger('click'); + expect(close).toHaveBeenCalledTimes(1); +});