feat: update tag

tangjinzhou · tangjinzhou · commit 93cf802b513e · 2020-02-26T19:47:02.000+08:00
diff --git a/build/config.js b/build/config.js
@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'tree', // dev components
+    componentName: 'tag', // dev components
   },
 };
diff --git a/components/tag/Tag.jsx b/components/tag/Tag.jsx
@@ -3,9 +3,27 @@ import Icon from '../icon';
 import getTransitionProps from '../_util/getTransitionProps';
 import omit from 'omit.js';
 import Wave from '../_util/wave';
-import { hasProp, getListeners } from '../_util/props-util';
+import { hasProp, getListeners, getOptionProps } from '../_util/props-util';
 import BaseMixin from '../_util/BaseMixin';
 import { ConfigConsumerProps } from '../config-provider';
+import warning from '../_util/warning';
+
+const PresetColorTypes = [
+  'pink',
+  'red',
+  'yellow',
+  'orange',
+  'cyan',
+  'green',
+  'blue',
+  'purple',
+  'geekblue',
+  'magenta',
+  'volcano',
+  'gold',
+  'lime',
+];
+const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?$`);
 
 export default {
   name: 'ATag',
@@ -26,9 +44,15 @@ export default {
   },
   data() {
     let _visible = true;
-    if (hasProp(this, 'visible')) {
+    const props = getOptionProps(this);
+    if ('visible' in props) {
       _visible = this.visible;
     }
+    warning(
+      !('afterClose' in props),
+      'Tag',
+      "'afterClose' will be deprecated, please use 'close' event, we will remove this in the next version.",
+    );
     return {
       _visible,
     };
@@ -44,6 +68,11 @@ export default {
     setVisible(visible, e) {
       this.$emit('close', e);
       this.$emit('close.visible', false);
+      const afterClose = this.afterClose;
+      if (afterClose) {
+        // next version remove.
+        afterClose();
+      }
       if (e.defaultPrevented) {
         return;
       }
@@ -53,35 +82,28 @@ export default {
     },
 
     handleIconClick(e) {
+      e.stopPropagation();
       this.setVisible(false, e);
     },
 
-    animationEnd() {
-      const afterClose = this.afterClose;
-      if (afterClose) {
-        afterClose();
-      }
-    },
-
-    isPresetColor(color) {
+    isPresetColor() {
+      const { color } = this.$props;
       if (!color) {
         return false;
       }
-      return /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(
-        color,
-      );
+      return PresetColorRegex.test(color);
     },
     getTagStyle() {
       const { color } = this.$props;
-      const isPresetColor = this.isPresetColor(color);
+      const isPresetColor = this.isPresetColor();
       return {
         backgroundColor: color && !isPresetColor ? color : undefined,
       };
     },
 
     getTagClassName(prefixCls) {
       const { color } = this.$props;
-      const isPresetColor = this.isPresetColor(color);
+      const isPresetColor = this.isPresetColor();
       return {
         [prefixCls]: true,
         [`${prefixCls}-${color}`]: isPresetColor,
@@ -101,19 +123,18 @@ export default {
     const prefixCls = getPrefixCls('tag', customizePrefixCls);
     const { _visible: visible } = this.$data;
     const tag = (
-      <div
+      <span
         v-show={visible}
         {...{ on: omit(getListeners(this), ['close']) }}
         class={this.getTagClassName(prefixCls)}
         style={this.getTagStyle()}
       >
         {this.$slots.default}
         {this.renderCloseIcon()}
-      </div>
+      </span>
     );
     const transitionProps = getTransitionProps(`${prefixCls}-zoom`, {
       appear: false,
-      afterLeave: this.animationEnd,
     });
     return (
       <Wave>
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -1,17 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./components/tag/demo/basic.md correctly 1`] = `
-<div>
-  <div class="ant-tag">Tag 1</div>
-  <div class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a></div>
-  <div class="ant-tag">Tag 2<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
-        <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
-      </svg></i></div>
-  <div class="ant-tag">Prevent Default<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
-        <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
-      </svg></i></div>
-</div>
-`;
+exports[`renders ./components/tag/demo/basic.md correctly 1`] = `<div><span class="ant-tag">Tag 1</span> <span class="ant-tag"><a href="https://github.com/vueComponent/ant-design">Link</a></span> <span class="ant-tag">Tag 2<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span> <span class="ant-tag">Prevent Default<i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>`;
 
 exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
 <div>
@@ -24,60 +13,31 @@ exports[`renders ./components/tag/demo/checkable.md correctly 1`] = `
 exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
 <div>
   <h4 style="margin-bottom: 16px;">Presets:</h4>
-  <div>
-    <div class="ant-tag ant-tag-pink">pink</div>
-    <div class="ant-tag ant-tag-red">red</div>
-    <div class="ant-tag ant-tag-orange">orange</div>
-    <div class="ant-tag ant-tag-green">green</div>
-    <div class="ant-tag ant-tag-cyan">cyan</div>
-    <div class="ant-tag ant-tag-blue">blue</div>
-    <div class="ant-tag ant-tag-purple">purple</div>
-  </div>
+  <div><span class="ant-tag ant-tag-pink">pink</span> <span class="ant-tag ant-tag-red">red</span> <span class="ant-tag ant-tag-orange">orange</span> <span class="ant-tag ant-tag-green">green</span> <span class="ant-tag ant-tag-cyan">cyan</span> <span class="ant-tag ant-tag-blue">blue</span> <span class="ant-tag ant-tag-purple">purple</span></div>
   <h4>Custom:</h4>
-  <div>
-    <div class="ant-tag ant-tag-has-color" style="background-color: rgb(255, 85, 0);">#f50</div>
-    <div class="ant-tag ant-tag-has-color" style="background-color: rgb(45, 183, 245);">#2db7f5</div>
-    <div class="ant-tag ant-tag-has-color" style="background-color: rgb(135, 208, 104);">#87d068</div>
-    <div class="ant-tag ant-tag-has-color" style="background-color: rgb(16, 142, 233);">#108ee9</div>
-  </div>
+  <div><span class="ant-tag ant-tag-has-color" style="background-color: rgb(255, 85, 0);">#f50</span> <span class="ant-tag ant-tag-has-color" style="background-color: rgb(45, 183, 245);">#2db7f5</span> <span class="ant-tag ant-tag-has-color" style="background-color: rgb(135, 208, 104);">#87d068</span> <span class="ant-tag ant-tag-has-color" style="background-color: rgb(16, 142, 233);">#108ee9</span></div>
 </div>
 `;
 
 exports[`renders ./components/tag/demo/control.md correctly 1`] = `
-<div>
-  <div class="ant-tag">
-    Unremovable
-  </div>
-  <div class="ant-tag">
-    Tag 2
-    <i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
-        <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
-      </svg></i></div>
-  <div class="ant-tag">
-    Tag 3Tag 3Tag 3Tag 3...
-    <i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
-        <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
-      </svg></i></div>
-  <div class="ant-tag" style="border-style: dashed; background: rgb(255, 255, 255);"><i aria-label="icon: plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
-        <path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
-        <path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path>
-      </svg></i> New Tag
-  </div>
-</div>
+<div><span class="ant-tag">
+      Unremovable
+    </span><span class="ant-tag">
+      Tag 2
+    <i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span><span class="ant-tag">
+        Tag 3Tag 3Tag 3Tag 3...
+      <i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span> <span class="ant-tag" style="border-style: dashed; background: rgb(255, 255, 255);"><i aria-label="icon: plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></i> New Tag
+  </span></div>
 `;
 
 exports[`renders ./components/tag/demo/controlled.md correctly 1`] = `
-<div>
-  <div class="ant-tag">
+<div><span class="ant-tag">
     Movies
-    <i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
-        <path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path>
-      </svg></i></div> <br> <button type="button" class="ant-btn ant-btn-sm"><span>Toggle</span></button>
-</div>
+  <i aria-label="icon: close" tabindex="-1" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span> <br> <button type="button" class="ant-btn ant-btn-sm"><span>Toggle</span></button></div>
 `;
 
 exports[`renders ./components/tag/demo/hot-tags.md correctly 1`] = `
-<div><strong>Categories:</strong>
+<div><span>Categories:</span>
   <div class="ant-tag ant-tag-checkable">
     Movies
   </div>
diff --git a/components/tag/__tests__/__snapshots__/index.test.js.snap b/components/tag/__tests__/__snapshots__/index.test.js.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<div class="ant-tag" style="display: none;"></div>`;
+exports[`Tag visibility can be controlled by visible with hidden as initial value 1`] = `<span class="ant-tag" style="display: none;"></span>`;
 
-exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `<div class="ant-tag" style=""></div>`;
+exports[`Tag visibility can be controlled by visible with hidden as initial value 2`] = `<span class="ant-tag" style=""></span>`;
 
-exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<div class="ant-tag" style="display: none;"></div>`;
+exports[`Tag visibility can be controlled by visible with hidden as initial value 3`] = `<span class="ant-tag" style="display: none;"></span>`;
 
-exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `<div class="ant-tag"></div>`;
+exports[`Tag visibility can be controlled by visible with visible as initial value 1`] = `<span class="ant-tag"></span>`;
 
-exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<div class="ant-tag" style="display: none;"></div>`;
+exports[`Tag visibility can be controlled by visible with visible as initial value 2`] = `<span class="ant-tag" style="display: none;"></span>`;
 
-exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<div class="ant-tag" style=""></div>`;
+exports[`Tag visibility can be controlled by visible with visible as initial value 3`] = `<span class="ant-tag" style=""></span>`;
diff --git a/components/tag/__tests__/index.test.js b/components/tag/__tests__/index.test.js
@@ -1,8 +1,11 @@
 import { mount } from '@vue/test-utils';
 import { asyncExpect } from '@/tests/utils';
 import Tag from '..';
+import mountTest from '../../../tests/shared/mountTest';
 
 describe('Tag', () => {
+  mountTest(Tag);
+  mountTest(Tag.CheckableTag);
   it('should be closable', async () => {
     const onClose = jest.fn();
     const wrapper = mount(
diff --git a/components/tag/demo/basic.md b/components/tag/demo/basic.md
@@ -1,11 +1,11 @@
 <cn>
 #### 基本用法
-基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `onClose` `afterClose` 两个事件。
+基本标签的用法，可以通过添加 `closable` 变为可关闭标签。可关闭标签具有 `close` 两个事件。
 </cn>
 
 <us>
 #### basic Usage
-Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `onClose` `afterClose` events.
+Usage of basic Tag, and it could be closable by set `closable` property. Closable Tag supports `close` events.
 </us>
 
 ```tpl
@@ -15,7 +15,7 @@ Usage of basic Tag, and it could be closable by set `closable` property. Closabl
     <a-tag><a href="https://github.com/vueComponent/ant-design">Link</a></a-tag>
     <a-tag closable @close="log">Tag 2</a-tag>
     <a-tag closable @close="preventDefault">Prevent Default</a-tag>
-  </div>
+</div>
 </template>
 <script>
   export default {
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
@@ -5,8 +5,7 @@
 
 <us>
 #### Colorful Tag
-We preset a series of colorful tag style for different situation usage.
-And you can always set it to a hex color string for custom color.
+We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.
 </us>
 
 ```tpl
diff --git a/components/tag/demo/control.md b/components/tag/demo/control.md
@@ -1,24 +1,23 @@
 <cn>
 #### 动态添加和删除
-用数组生成一组标签，可以动态添加和删除，通过监听删除动画结束的事件 `afterClose` 实现。
+用数组生成一组标签，可以动态添加和删除。
 </cn>
 
 <us>
 #### Add & Remove Dynamically
 Generating a set of Tags by array, you can add and remove dynamically.
-It's based on `afterClose` event, which will be triggered while the close animation end.
 </us>
 
 ```tpl
 <template>
   <div>
     <template v-for="(tag, index) in tags">
       <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
-        <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
+        <a-tag :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
           {{`${tag.slice(0, 20)}...`}}
         </a-tag>
       </a-tooltip>
-      <a-tag v-else :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
+      <a-tag v-else :key="tag" :closable="index !== 0" @close="() => handleClose(tag)">
         {{tag}}
       </a-tag>
     </template>
diff --git a/components/tag/demo/controlled.md b/components/tag/demo/controlled.md
@@ -15,7 +15,7 @@ By using the `visible` prop, you can control the close state of Tag.
       Movies
     </a-tag>
     <br />
-    <a-button size="small" @click="()=>{this.visible = !this.visible}">
+    <a-button size="small" @click="visible = !visible">
       Toggle
     </a-button>
   </div>
diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md
@@ -11,7 +11,7 @@ Select your favourite topics.
 ```tpl
 <template>
   <div>
-    <strong :style="{ marginRight: 8 }">Categories:</strong>
+    <span :style="{ marginRight: 8 }">Categories:</span>
     <template v-for=" tag in tags">
       <a-checkable-tag
         :key="tag"
diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
@@ -2,12 +2,12 @@
 
 ### Tag
 
-| Property         | Description                                         | Type       | Default |
-| ---------------- | --------------------------------------------------- | ---------- | ------- |
-| afterClose       | Callback executed when close animation is completed | () => void | -       |
-| closable         | Whether the Tag can be closed                       | boolean    | `false` |
-| color            | Color of the Tag                                    | string     | -       |
-| visible(v-model) | Whether the Tag is closed or not                    | boolean    | `true`  |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| afterClose | Callback executed when close animation is completed, please use `close` event, we will remove this in the next version | () => void | - |  |
+| closable | Whether the Tag can be closed | boolean | `false` |
+| color | Color of the Tag | string | - |
+| visible(v-model) | Whether the Tag is closed or not | boolean | `true` |
 
 ### Tag Events
 
diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
