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

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="danger" size="medium">{{ $t('tag') }}</van-tag>
-      <van-tag type="danger" size="large">{{ $t('tag') }}</van-tag>
+      <van-tag type="success">{{ $t('tag') }}</van-tag>
+      <van-tag type="success" size="medium">{{ $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>