feat(Tag): add closeable prop (#4763)

src/tag/README.md

@@ -21,16 +21,6 @@ Vue.use(Tag);
 <van-tag type="warning">Tag</van-tag>
 ```
 
-### Plain style
-
-```html
-<van-tag plain>Tag</van-tag>
-<van-tag plain type="primary">Tag</van-tag>
-<van-tag plain type="success">Tag</van-tag>
-<van-tag plain type="danger">Tag</van-tag>
-<van-tag plain type="warning">Tag</van-tag>
-```
-
 ### Round style
 
 ```html
@@ -51,6 +41,16 @@ Vue.use(Tag);
 <van-tag mark type="warning">Tag</van-tag>
 ```
 
+### Plain style
+
+```html
+<van-tag plain>Tag</van-tag>
+<van-tag plain type="primary">Tag</van-tag>
+<van-tag plain type="success">Tag</van-tag>
+<van-tag plain type="danger">Tag</van-tag>
+<van-tag plain type="warning">Tag</van-tag>
+```
+
 ### Custom Color
 
 ```html
@@ -69,6 +69,45 @@ Vue.use(Tag);
 <van-tag type="danger" size="large">Tag</van-tag>
 ```
 
+### Closeable
+
+```html
+<van-tag
+  v-if="showPrimary"
+  type="primary"
+  size="medium"
+  @close="close('primary')"
+>
+  Tag
+</van-tag>
+<van-tag
+  v-if="showSuccess"
+  type="success"
+  size="medium"
+  @close="close('success')"
+>
+  Tag
+</van-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 | - |

src/tag/README.zh-CN.md

@@ -23,18 +23,6 @@ Vue.use(Tag);
 <van-tag type="warning">标签</van-tag>
 ```
 
-### 空心样式
-
-设置`plain`属性设置为空心样式
-
-```html
-<van-tag plain>标签</van-tag>
-<van-tag plain type="primary">标签</van-tag>
-<van-tag plain type="success">标签</van-tag>
-<van-tag plain type="danger">标签</van-tag>
-<van-tag plain type="warning">标签</van-tag>
-```
-
 ### 圆角样式
 
 通过`round`设置为圆角样式
@@ -59,6 +47,18 @@ Vue.use(Tag);
 <van-tag mark type="warning">标签</van-tag>
 ```
 
+### 空心样式
+
+设置`plain`属性设置为空心样式
+
+```html
+<van-tag plain>标签</van-tag>
+<van-tag plain type="primary">标签</van-tag>
+<van-tag plain type="success">标签</van-tag>
+<van-tag plain type="danger">标签</van-tag>
+<van-tag plain type="warning">标签</van-tag>
+```
+
 ### 自定义颜色
 
 ```html
@@ -77,6 +77,47 @@ Vue.use(Tag);
 <van-tag type="danger" size="large">标签</van-tag>
 ```
 
+### 可关闭标签
+
+添加`closeable`属性表示标签是可关闭的，关闭标签时会触发`close`事件，在`close`事件中可以执行隐藏标签的逻辑
+
+```html
+<van-tag
+  v-if="showPrimary"
+  type="primary"
+  size="medium"
+  @close="close('primary')"
+>
+  标签
+</van-tag>
+<van-tag
+  v-if="showSuccess"
+  type="success"
+  size="medium"
+  @close="close('success')"
+>
+  标签
+</van-tag>
+```
+
+```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 | 关闭标签时触发 | - |

src/tag/demo/index.vue

@@ -8,14 +8,6 @@
       <van-tag type="warning">{{ $t('tag') }}</van-tag>
     </demo-block>
 
-    <demo-block :title="$t('plain')">
-      <van-tag plain>{{ $t('tag') }}</van-tag>
-      <van-tag plain type="primary">{{ $t('tag') }}</van-tag>
-      <van-tag plain type="success">{{ $t('tag') }}</van-tag>
-      <van-tag plain type="danger">{{ $t('tag') }}</van-tag>
-      <van-tag plain type="warning">{{ $t('tag') }}</van-tag>
-    </demo-block>
-
     <demo-block :title="$t('round')">
       <van-tag round>{{ $t('tag') }}</van-tag>
       <van-tag round type="primary">{{ $t('tag') }}</van-tag>
@@ -32,6 +24,14 @@
       <van-tag mark type="warning">{{ $t('tag') }}</van-tag>
     </demo-block>
 
+    <demo-block :title="$t('plain')">
+      <van-tag plain>{{ $t('tag') }}</van-tag>
+      <van-tag plain type="primary">{{ $t('tag') }}</van-tag>
+      <van-tag plain type="success">{{ $t('tag') }}</van-tag>
+      <van-tag plain type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag plain type="warning">{{ $t('tag') }}</van-tag>
+    </demo-block>
+
     <demo-block :title="$t('customColor')">
       <van-tag color="#f2826a">{{ $t('tag') }}</van-tag>
       <van-tag color="#f2826a" plain>{{ $t('tag') }}</van-tag>
@@ -41,9 +41,30 @@
     </demo-block>
 
     <demo-block :title="$t('customSize')">
-      <van-tag type="danger">{{ $t('tag') }}</van-tag>
+      <van-tag type="success">{{ $t('tag') }}</van-tag>
-      <van-tag type="danger" size="medium">{{ $t('tag') }}</van-tag>
+      <van-tag type="success" size="medium">{{ $t('tag') }}</van-tag>
-      <van-tag type="danger" size="large">{{ $t('tag') }}</van-tag>
+      <van-tag type="success" size="large">{{ $t('tag') }}</van-tag>
+    </demo-block>
+
+    <demo-block :title="$t('closeable')">
+      <van-tag
+        v-if="show.primary"
+        size="medium"
+        closeable
+        type="primary"
+        @close="close('primary')"
+      >
+        {{ $t('tag') }}
+      </van-tag>
+      <van-tag
+        v-if="show.success"
+        size="medium"
+        closeable
+        type="success"
+        @close="close('success')"
+      >
+        {{ $t('tag') }}
+      </van-tag>
     </demo-block>
   </demo-section>
 </template>
@@ -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;
+    }
   }
 };
 </script>

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;
+    padding-right: .7em;
-    border-radius: 0 .8em .8em 0;
 
+    &,
     &::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;
+  }
 }

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 = (
     <span
       style={style}
-      class={[
+      class={[bem([classes, type]), { [BORDER_SURROUND]: plain }]}
-        bem([classes, type]),
-        { [BORDER_SURROUND]: plain }
-      ]}
       {...inherit(ctx, true)}
     >
       {slots.default && slots.default()}
+      {props.closeable && (
+        <Icon
+          name="cross"
+          class={bem('close')}
+          onClick={() => {
+            emit(ctx, 'close');
+          }}
+        />
+      )}
     </span>
   );
+
+  if (props.closeable) {
+    return <transition name="van-fade">{Content}</transition>;
+  }
+
+  return Content;
 }
 
 Tag.props = {
@@ -63,6 +77,7 @@ Tag.props = {
   plain: Boolean,
   round: Boolean,
   textColor: String,
+  closeable: Boolean,
   type: {
     type: String,
     default: 'default'

src/tag/test/__snapshots__/demo.spec.js.snap

@@ -3,10 +3,15 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div><span class="van-tag van-tag--default">标签</span> <span class="van-tag van-tag--primary">标签</span> <span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--warning">标签</span></div>
-  <div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
   <div><span class="van-tag van-tag--round van-tag--default">标签</span> <span class="van-tag van-tag--round van-tag--primary">标签</span> <span class="van-tag van-tag--round van-tag--success">标签</span> <span class="van-tag van-tag--round van-tag--danger">标签</span> <span class="van-tag van-tag--round van-tag--warning">标签</span></div>
   <div><span class="van-tag van-tag--mark van-tag--default">标签</span> <span class="van-tag van-tag--mark van-tag--primary">标签</span> <span class="van-tag van-tag--mark van-tag--success">标签</span> <span class="van-tag van-tag--mark van-tag--danger">标签</span> <span class="van-tag van-tag--mark van-tag--warning">标签</span></div>
+  <div><span class="van-tag van-tag--plain van-tag--default van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--primary van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--success van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--danger van-hairline--surround">标签</span> <span class="van-tag van-tag--plain van-tag--warning van-hairline--surround">标签</span></div>
   <div><span class="van-tag van-tag--default" style="background-color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(242, 130, 106);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--plain van-tag--default van-hairline--surround" style="color: rgb(114, 50, 221);">标签</span> <span class="van-tag van-tag--default" style="background-color: rgb(255, 225, 225); color: rgb(173, 0, 0);">标签</span></div>
-  <div><span class="van-tag van-tag--danger">标签</span> <span class="van-tag van-tag--medium van-tag--danger">标签</span> <span class="van-tag van-tag--large van-tag--danger">标签</span></div>
+  <div><span class="van-tag van-tag--success">标签</span> <span class="van-tag van-tag--medium van-tag--success">标签</span> <span class="van-tag van-tag--large van-tag--success">标签</span></div>
+  <div><span class="van-tag van-tag--medium van-tag--primary" name="van-fade">
+      标签
+    <i class="van-icon van-icon-cross van-tag__close"><!----></i></span> <span class="van-tag van-tag--medium van-tag--success" name="van-fade">
+      标签
+    <i class="van-icon van-icon-cross van-tag__close"><!----></i></span></div>
 </div>
 `;

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);
+});