docs(Tag): update demo (#7020)

src/tag/demo/index.vue

@@ -1,65 +1,65 @@
 <template>
   <demo-section>
-    <demo-block :title="t('basicUsage')">
-      <van-tag type="primary">{{ t('tag') }}</van-tag>
-      <van-tag type="success">{{ t('tag') }}</van-tag>
-      <van-tag type="danger">{{ t('tag') }}</van-tag>
-      <van-tag type="warning">{{ t('tag') }}</van-tag>
+    <demo-block card :title="t('basicUsage')">
+      <van-cell :title="`primary ${t('type')}`">
+        <van-tag type="primary">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="`success ${t('type')}`">
+        <van-tag type="success">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="`danger ${t('type')}`">
+        <van-tag type="danger">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="`warning ${t('type')}`">
+        <van-tag type="warning">{{ t('tag') }}</van-tag>
+      </van-cell>
     </demo-block>
 
-    <demo-block :title="t('round')">
-      <van-tag round type="primary">{{ t('tag') }}</van-tag>
-      <van-tag round type="success">{{ t('tag') }}</van-tag>
-      <van-tag round type="danger">{{ t('tag') }}</van-tag>
-      <van-tag round type="warning">{{ t('tag') }}</van-tag>
+    <demo-block card :title="t('tagStyle')">
+      <van-cell :title="t('plain')">
+        <van-tag plain type="primary">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="t('round')">
+        <van-tag round type="primary">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="t('mark')">
+        <van-tag mark type="primary">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="t('closeable')">
+        <van-tag
+          v-if="show"
+          size="medium"
+          closeable
+          type="primary"
+          @close="close"
+        >
+          {{ t('tag') }}
+        </van-tag>
+      </van-cell>
     </demo-block>
 
-    <demo-block :title="t('mark')">
-      <van-tag mark type="primary">{{ t('tag') }}</van-tag>
-      <van-tag mark type="success">{{ t('tag') }}</van-tag>
-      <van-tag mark type="danger">{{ t('tag') }}</van-tag>
-      <van-tag mark type="warning">{{ t('tag') }}</van-tag>
+    <demo-block card :title="t('customSize')">
+      <van-cell :title="t('smallSize')">
+        <van-tag type="primary">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="t('mediumSize')">
+        <van-tag type="primary" size="medium">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="t('largeSize')">
+        <van-tag type="primary" size="large">{{ t('tag') }}</van-tag>
+      </van-cell>
     </demo-block>
 
-    <demo-block :title="t('plain')">
-      <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="#7232dd">{{ t('tag') }}</van-tag>
-      <van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
-      <van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
-    </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>
-    </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 card :title="t('customColor')">
+      <van-cell :title="t('customBgColor')">
+        <van-tag color="#7232dd">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="t('customTextColor')">
+        <van-tag color="#ffe1e1" text-color="#ad0000">{{ t('tag') }}</van-tag>
+      </van-cell>
+      <van-cell :title="t('customPlainColor')">
+        <van-tag color="#7232dd" plain>{{ t('tag') }}</van-tag>
+      </van-cell>
     </demo-block>
   </demo-section>
 </template>
@@ -68,35 +68,47 @@
 export default {
   i18n: {
     'zh-CN': {
+      type: '类型',
+      mark: '标记样式',
       plain: '空心样式',
       round: '圆角样式',
-      mark: '标记样式',
+      tagStyle: '样式风格',
       closeable: '可关闭标签',
-      customColor: '自定义颜色',
+      smallSize: '小号标签',
+      largeSize: '大号标签',
+      mediumSize: '中号标签',
       customSize: '标签大小',
+      customColor: '自定义颜色',
+      customBgColor: '背景颜色',
+      customTextColor: '文字颜色',
+      customPlainColor: '空心颜色',
     },
     'en-US': {
+      mark: 'Mark style',
       plain: 'Plain style',
       round: 'Round style',
-      mark: 'Mark style',
+      tagStyle: 'Tag Style',
       closeable: 'Closeable',
+      smallSize: 'Small Size',
+      largeSize: 'Large Size',
+      mediumSize: 'Medium Size',
       customColor: 'Custom Color',
       customSize: 'Custom Size',
+      customBgColor: 'Background Color',
+      customTextColor: 'Text Color',
+      customPlainColor: 'Plain Color',
     },
   },
 
   data() {
     return {
-      show: {
-        primary: true,
-        success: true,
-      },
+      show: true,
     };
   },
 
   methods: {
-    close(tag) {
-      this.show[tag] = false;
+    close() {
+      this.show = false;
     },
   },
 };
@@ -106,14 +118,6 @@ export default {
 @import '../../style/var';
 
 .demo-tag {
-  background-color: @white;
-
-  .van-tag {
-    &:first-of-type {
-      margin-left: @padding-md;
-    }
-  }
-
   .van-tag + .van-tag {
     margin-left: @padding-xs;
   }