feat(Tag): add show prop and fix transition

src/tag/README.md

@@ -68,19 +68,19 @@ Vue.use(Tag);
 
 ```html
 <van-tag
-  v-if="show.primary"
   closeable
   size="medium"
   type="primary"
+  :show="show.primary"
   @close="close('primary')"
 >
   Tag
 </van-tag>
 <van-tag
-  v-if="show.success"
   closeable
   size="medium"
   type="success"
+  :show="show.success"
   @close="close('success')"
 >
   Tag
@@ -114,6 +114,7 @@ export default {
 | type | Type, can be set to `primary` `success` `danger` `warning` | _string_ | `default` |
 | size | Size, can be set to `large` `medium` | _string_ | - |
 | color | Custom color | _string_ | - |
+| show | Whether to show tag | _boolean_ | `true` |
 | plain | Whether to be plain style | _boolean_ | `false` |
 | round | Whether to be round style | _boolean_ | `false` |
 | mark | Whether to be mark style | _boolean_ | `false` |

src/tag/README.zh-CN.md

@@ -78,19 +78,19 @@ Vue.use(Tag);
 
 ```html
 <van-tag
-  v-if="show.primary"
   closeable
   size="medium"
   type="primary"
+  :show="show.primary"
   @close="close('primary')"
 >
   标签
 </van-tag>
 <van-tag
-  v-if="show.success"
   closeable
   size="medium"
   type="success"
+  :show="show.success"
   @close="close('success')"
 >
   标签
@@ -124,6 +124,7 @@ export default {
 | type | 类型，可选值为`primary` `success` `danger` `warning` | _string_ | `default` |
 | size | 大小, 可选值为`large` `medium` | _string_ | - |
 | color | 标签颜色 | _string_ | - |
+| show | 是否展示标签 | _boolean_ | `true` |
 | plain | 是否为空心样式 | _boolean_ | `false` |
 | round | 是否为圆角样式 | _boolean_ | `false` |
 | mark | 是否为标记样式 | _boolean_ | `false` |

src/tag/demo/index.vue

@@ -43,8 +43,8 @@
 
     <demo-block :title="t('closeable')">
       <van-tag
-        v-if="show.primary"
         size="medium"
+        :show="show.primary"
         closeable
         type="primary"
         @close="close('primary')"
@@ -52,8 +52,8 @@
         {{ t('tag') }}
       </van-tag>
       <van-tag
-        v-if="show.success"
         size="medium"
+        :show="show.success"
         closeable
         type="success"
         @close="close('success')"

src/tag/index.js

@@ -1,7 +1,5 @@
-// Utils
+import { Transition } from 'vue';
 import { createNamespace } from '../utils';
-
-// Components
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('tag');
@@ -19,6 +17,10 @@ export default createComponent({
       type: String,
       default: 'default',
     },
+    show: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   emits: ['close'],
@@ -51,16 +53,14 @@ export default createComponent({
       );
 
       return (
-        <transition name={props.closeable ? 'van-fade' : null}>
+        <Transition name={props.closeable ? 'van-fade' : null}>
-          <span
+          {props.show ? (
-            key="content"
+            <span key="content" style={style} class={bem([classes, type])}>
-            style={style}
+              {slots.default?.()}
-            class={bem([classes, type])}
+              {CloseIcon}
-          >
+            </span>
-            {slots.default?.()}
+          ) : null}
-            {CloseIcon}
+        </Transition>
-          </span>
-        </transition>
       );
     };
   },