Repository: Tencent/tdesign-mobile-vue
Pull request #1319 (2024-04-18 02:51:54)

refactor(badge): sfc to tsx
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [ ] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(组件名称): 处理问题或特性描述 ...

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/8731721367)
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** -89 B (0%) 

**Total Size:** 437 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 233 kB | +23 B (0%) |
| `./dist/tdesign.min.js` | 137 kB | -112 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 38.6 kB |
| `./dist/tdesign.min.css` | 28.1 kB |

</details>


github-actions[bot]: **Size Change:** -89 B (0%) 

**Total Size:** 437 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 233 kB | +23 B (0%) |
| `./dist/tdesign.min.js` | 137 kB | -112 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 38.6 kB |
| `./dist/tdesign.min.css` | 28.1 kB |

</details>


github-actions[bot]: **Size Change:** -89 B (0%) 

**Total Size:** 437 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 233 kB | +23 B (0%) |
| `./dist/tdesign.min.js` | 137 kB | -112 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/reset.css` | 672 B |
| `./dist/tdesign.css` | 38.6 kB |
| `./dist/tdesign.min.css` | 28.1 kB |

</details>



Patch:
diff --git a/src/badge/badge.en-US.md b/src/badge/badge.en-US.md
index ac11cd70..d22d4848 100644
--- a/src/badge/badge.en-US.md
+++ b/src/badge/badge.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Badge Props
 
 name | type | default | description | required
@@ -11,12 +12,12 @@ count | String / Number / Slot / Function | 0 | Typescript：`string \| number \
 dot | Boolean | false | \- | N
 maxCount | Number | 99 | \- | N
 offset | Array | - | Typescript：`Array<string \| number>` | N
-shape | String | circle | options：circle/square/bubble/ribbon | N
+shape | String | circle | options: circle/square/bubble/ribbon | N
 showZero | Boolean | false | \- | N
-size | String | medium | options：medium/large | N
+size | String | medium | options: medium/large | N
 
+### CSS 变量
 
-### CSS Variables
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -32,4 +33,4 @@ Name | Default Value | Description
 --td-badge-large-font-size | @font-size-s | - 
 --td-badge-large-height | 20px | - 
 --td-badge-large-padding | 5px | - 
---td-badge-text-color | @font-white-1 | - 
+--td-badge-text-color | @font-white-1 | -
\ No newline at end of file
diff --git a/src/badge/badge.md b/src/badge/badge.md
index 6d605433..25c9a7f9 100644
--- a/src/badge/badge.md
+++ b/src/badge/badge.md
@@ -1,9 +1,10 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Badge Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 color | String | - | 颜色 | N
 content | String / Slot / Function | - | 徽标内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
@@ -15,8 +16,8 @@ shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 showZero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
 
-
 ### CSS 变量
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -32,4 +33,4 @@ size | String | medium | 尺寸。可选项：medium/large | N
 --td-badge-large-font-size | @font-size-s | - 
 --td-badge-large-height | 20px | - 
 --td-badge-large-padding | 5px | - 
---td-badge-text-color | @font-white-1 | - 
+--td-badge-text-color | @font-white-1 | -
\ No newline at end of file
diff --git a/src/badge/badge.tsx b/src/badge/badge.tsx
new file mode 100644
index 00000000..04e5bf34
--- /dev/null
+++ b/src/badge/badge.tsx
@@ -0,0 +1,139 @@
+import { defineComponent, computed } from 'vue';
+import config from '../config';
+import BadgeProps from './props';
+import { usePrefixClass } from '../hooks/useClass';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
+
+const { prefix } = config;
+const name = `${prefix}-badge`;
+
+export default defineComponent({
+  name,
+  props: BadgeProps,
+  setup(props) {
+    const renderTNodeJSX = useTNodeJSX();
+    const renderTNodeContent = useContent();
+
+    const badgeClass = usePrefixClass('badge');
+    // 徽标外层样式类
+    const badgeClasses = computed(() => ({
+      [`${badgeClass.value}`]: true,
+      [`${badgeClass.value}__ribbon-outer`]: props.shape === 'ribbon',
+    }));
+
+    // 徽标内层样式类
+    const badgeInnerClasses = computed(() => ({
+      [`${badgeClass.value}--basic`]: true,
+      [`${badgeClass.value}--dot`]: props.dot,
+      [`${badgeClass.value}--${props.size}`]: true,
+      [`${badgeClass.value}--${props.shape}`]: true,
+      [`${badgeClass.value}--count`]: !props.dot && props.count,
+      [`${prefix}-has-count`]: true,
+    }));
+
+    // 是否展示角标
+    const isShowBadge = computed(() => {
+      if (props.dot) {
+        return true;
+      }
+      const count = Number(props.count);
+      if (!props.showZero && count === 0) {
+        return false;
+      }
+      if (props.count == null) return false;
+      return true;
+    });
+
+    const hasUnit = (unit: string) =>
+      unit.indexOf('px') > 0 ||
+      unit.indexOf('rpx') > 0 ||
+      unit.indexOf('em') > 0 ||
+      unit.indexOf('rem') > 0 ||
+      unit.indexOf('%') > 0 ||
+      unit.indexOf('vh') > 0 ||
+      unit.indexOf('vm') > 0;
+
+    // 徽标自定义样式
+    const badgeStyles = computed(() => {
+      if (!props.offset) {
+        return { background: props.color };
+      }
+      let [xOffset = 0, yOffset = 0]: Array<string | number> = props.offset;
+      xOffset = hasUnit(xOffset.toString()) ? xOffset : `${xOffset}px`;
+      yOffset = hasUnit(yOffset.toString()) ? yOffset : `${yOffset}px`;
+      return {
+        background: props.color,
+        right: xOffset,
+        top: yOffset,
+      };
+    });
+
+    const badgeValue = computed(() => {
+      if (props.dot) {
+        return '';
+      }
+      const count = Number(props.count);
+      if (isNaN(count) || isNaN(props.maxCount)) {
+        return props.count;
+      }
+      return count > props.maxCount ? `${props.maxCount}+` : count;
+    });
+
+    return () => {
+      const readerCount = () => {
+        const countType = typeof props.count;
+        if (countType === 'string' || countType === 'number') {
+          return null;
+        }
+        return renderTNodeJSX('count');
+      };
+      const readerContent = () => {
+        const content = renderTNodeContent('default', 'content');
+        if (typeof content === 'string') {
+          return <span class={`${badgeClass.value}__content-text`}>{content}</span>;
+        }
+        return content;
+      };
+      const readerRibbonBefore = () => {
+        if (props.shape !== 'ribbon') {
+          return null;
+        }
+        return (
+          <div
+            class={`${badgeClass.value}__ribbon--before`}
+            style={props.color ? `border-color: ${props.color}` : ''}
+          />
+        );
+      };
+
+      const readerRibbonAfter = () => {
+        if (props.shape !== 'ribbon') {
+          return null;
+        }
+        return (
+          <div class={`${badgeClass.value}__ribbon--after`} style={props.color ? `border-color: ${props.color}` : ''} />
+        );
+      };
+
+      const readerBadge = () => {
+        if (!isShowBadge.value) {
+          return null;
+        }
+        return (
+          <div class={badgeInnerClasses.value} style={badgeStyles.value}>
+            {readerRibbonBefore()}
+            {badgeValue.value}
+            {readerRibbonAfter()}
+          </div>
+        );
+      };
+      return (
+        <div class={badgeClasses.value}>
+          <div class={`${badgeClass.value}__content`}>{readerContent()}</div>
+          {readerBadge()}
+          {readerCount()}
+        </div>
+      );
+    };
+  },
+});
diff --git a/src/badge/badge.vue b/src/badge/badge.vue
deleted file mode 100644
index e45a9865..00000000
--- a/src/badge/badge.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <div :class="badgeClasses">
-    <div :class="`${name}__content`">
-      <t-node v-if="!content" :content="badgeContent" />
-      <span v-else :class="`${name}__content-text`">{{ content }}</span>
-    </div>
-    <div v-if="isShowBadge" :class="badgeInnerClasses" :style="badgeStyles">
-      <div
-        v-if="shape === 'ribbon'"
-        :class="`${name}__ribbon--before`"
-        :style="color ? `border-color: ${color}` : ''"
-      />
-      {{ badgeValue }}
-      <div v-if="shape === 'ribbon'" :class="`${name}__ribbon--after`" :style="color ? `border-color: ${color}` : ''" />
-    </div>
-    <t-node :content="countContent" />
-  </div>
-</template>
-
-<script lang="ts">
-import { computed, defineComponent, getCurrentInstance, toRefs } from 'vue';
-import { renderContent, renderTNode, TNode } from '../shared';
-import BadgeProps from './props';
-import config from '../config';
-
-const { prefix } = config;
-const name = `${prefix}-badge`;
-
-export default defineComponent({
-  name,
-  components: { TNode },
-  props: BadgeProps,
-  setup(props, context) {
-    const internalInstance = getCurrentInstance();
-    const badgeContent = computed(() => renderContent(internalInstance, 'default', 'content'));
-    const countContent = computed(() => {
-      if (typeof props.count === 'function' || context.slots.count) {
-        return renderTNode(internalInstance, 'count');
-      }
-      return null;
-    });
-
-    // 是否展示角标
-    const isShowBadge = computed(() => {
-      if (props.dot) {
-        return true;
-      }
-      const count = Number(props.count);
-      if (!props.showZero && count === 0) {
-        return false;
-      }
-      if (props.count == null) return false;
-      return true;
-    });
-
-    // 徽标外层样式类
-    const badgeClasses = computed(() => ({
-      [`${name}`]: true,
-      [`${name}__ribbon-outer`]: props.shape === 'ribbon',
-    }));
-
-    // 徽标内层样式类
-    const badgeInnerClasses = computed(() => ({
-      [`${name}--basic`]: true,
-      [`${name}--dot`]: props.dot,
-      [`${name}--${props.size}`]: true,
-      [`${name}--${props.shape}`]: true,
-      [`${name}--count`]: !props.dot && props.count,
-      [`${prefix}-has-count`]: true,
-    }));
-
-    const hasUnit = (unit: string) =>
-      unit.indexOf('px') > 0 ||
-      unit.indexOf('rpx') > 0 ||
-      unit.indexOf('em') > 0 ||
-      unit.indexOf('rem') > 0 ||
-      unit.indexOf('%') > 0 ||
-      unit.indexOf('vh') > 0 ||
-      unit.indexOf('vm') > 0;
-
-    // 徽标自定义样式
-    const badgeStyles = computed(() => {
-      if (!props.offset) {
-        return { background: props.color };
-      }
-      let [xOffset = 0, yOffset = 0]: Array<string | number> = props.offset;
-      xOffset = hasUnit(xOffset.toString()) ? xOffset : `${xOffset}px`;
-      yOffset = hasUnit(yOffset.toString()) ? yOffset : `${yOffset}px`;
-      return {
-        background: props.color,
-        right: xOffset,
-        top: yOffset,
-      };
-    });
-
-    const badgeValue = computed(() => {
-      if (props.dot) {
-        return '';
-      }
-      const count = Number(props.count);
-      if (isNaN(count) || isNaN(props.maxCount)) {
-        return props.count;
-      }
-      return count > props.maxCount ? `${props.maxCount}+` : count;
-    });
-
-    return {
-      ...toRefs(props),
-      name,
-      badgeClasses,
-      badgeContent,
-      countContent,
-      isShowBadge,
-      badgeInnerClasses,
-      badgeStyles,
-      badgeValue,
-    };
-  },
-});
-</script>
diff --git a/src/badge/index.ts b/src/badge/index.ts
index 403cc11f..234dca55 100644
--- a/src/badge/index.ts
+++ b/src/badge/index.ts
@@ -1,4 +1,4 @@
-import Badge from './badge.vue';
+import Badge from './badge';
 import { withInstall, WithInstallType } from '../shared';
 import { TdBadgeProps } from './type';
 


Test patch:
diff --git a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
index 34b12603..e50f969d 100644
--- a/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/avatar/__test__/__snapshots__/demo.test.jsx.snap
@@ -70,7 +70,7 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -137,7 +137,7 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -204,7 +204,7 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -271,7 +271,7 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -338,7 +338,7 @@ exports[`Avatar > Avatar actionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -419,9 +419,9 @@ exports[`Avatar > Avatar badgeAvatarVue demo works fine 1`] = `
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
           style="right: 4px; top: 4px;"
         >
-          <!--v-if-->
-            
-          <!--v-if-->
+          <!---->
+          
+          <!---->
         </div>
         <!---->
       </div>
@@ -455,9 +455,9 @@ exports[`Avatar > Avatar badgeAvatarVue demo works fine 1`] = `
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           style="right: 6px; top: 6px;"
         >
-          <!--v-if-->
-           8 
-          <!--v-if-->
+          <!---->
+          8
+          <!---->
         </div>
         <!---->
       </div>
@@ -502,9 +502,9 @@ exports[`Avatar > Avatar badgeAvatarVue demo works fine 1`] = `
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           style="right: 6px; top: 6px;"
         >
-          <!--v-if-->
-           12 
-          <!--v-if-->
+          <!---->
+          12
+          <!---->
         </div>
         <!---->
       </div>
@@ -542,7 +542,7 @@ exports[`Avatar > Avatar characterAvatarVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -571,7 +571,7 @@ exports[`Avatar > Avatar characterAvatarVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -650,7 +650,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -718,7 +718,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -786,7 +786,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -854,7 +854,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -922,7 +922,7 @@ exports[`Avatar > Avatar exhibitionVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -972,7 +972,7 @@ exports[`Avatar > Avatar iconAvatarVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -1012,7 +1012,7 @@ exports[`Avatar > Avatar iconAvatarVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -1086,7 +1086,7 @@ exports[`Avatar > Avatar imageAvatarVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -1153,7 +1153,7 @@ exports[`Avatar > Avatar imageAvatarVue demo works fine 1`] = `
           </div>
           
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -1266,7 +1266,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 </div>
                 
               </div>
-              <!--v-if-->
+              <!---->
               <!---->
             </div>
           </div>
@@ -1333,7 +1333,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 </div>
                 
               </div>
-              <!--v-if-->
+              <!---->
               <!---->
             </div>
           </div>
@@ -1389,7 +1389,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 </div>
                 
               </div>
-              <!--v-if-->
+              <!---->
               <!---->
             </div>
           </div>
@@ -1418,7 +1418,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 </div>
                 
               </div>
-              <!--v-if-->
+              <!---->
               <!---->
             </div>
           </div>
@@ -1484,7 +1484,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 </div>
                 
               </div>
-              <!--v-if-->
+              <!---->
               <!---->
             </div>
           </div>
@@ -1524,7 +1524,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 </div>
                 
               </div>
-              <!--v-if-->
+              <!---->
               <!---->
             </div>
           </div>
@@ -1626,7 +1626,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -1694,7 +1694,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -1762,7 +1762,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -1830,7 +1830,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -1898,7 +1898,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -1998,7 +1998,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2065,7 +2065,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2132,7 +2132,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2199,7 +2199,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2266,7 +2266,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2366,9 +2366,9 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
                 style="right: 4px; top: 4px;"
               >
-                <!--v-if-->
-                  
-                <!--v-if-->
+                <!---->
+                
+                <!---->
               </div>
               <!---->
             </div>
@@ -2402,9 +2402,9 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 style="right: 6px; top: 6px;"
               >
-                <!--v-if-->
-                 8 
-                <!--v-if-->
+                <!---->
+                8
+                <!---->
               </div>
               <!---->
             </div>
@@ -2449,9 +2449,9 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 style="right: 6px; top: 6px;"
               >
-                <!--v-if-->
-                 12 
-                <!--v-if-->
+                <!---->
+                12
+                <!---->
               </div>
               <!---->
             </div>
@@ -2555,9 +2555,9 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 >
-                  <!--v-if-->
-                   10 
-                  <!--v-if-->
+                  <!---->
+                  10
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -2587,7 +2587,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2627,7 +2627,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2701,9 +2701,9 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 >
-                  <!--v-if-->
-                   10 
-                  <!--v-if-->
+                  <!---->
+                  10
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -2733,7 +2733,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2773,7 +2773,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2847,9 +2847,9 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
                 >
-                  <!--v-if-->
-                    
-                  <!--v-if-->
+                  <!---->
+                  
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -2879,7 +2879,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -2919,7 +2919,7 @@ exports[`Avatar > Avatar mobileVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -3004,9 +3004,9 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           >
-            <!--v-if-->
-             10 
-            <!--v-if-->
+            <!---->
+            10
+            <!---->
           </div>
           <!---->
         </div>
@@ -3036,7 +3036,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -3076,7 +3076,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -3150,9 +3150,9 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           >
-            <!--v-if-->
-             10 
-            <!--v-if-->
+            <!---->
+            10
+            <!---->
           </div>
           <!---->
         </div>
@@ -3182,7 +3182,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -3222,7 +3222,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -3296,9 +3296,9 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
           >
-            <!--v-if-->
-              
-            <!--v-if-->
+            <!---->
+            
+            <!---->
           </div>
           <!---->
         </div>
@@ -3328,7 +3328,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
@@ -3368,7 +3368,7 @@ exports[`Avatar > Avatar sizeVue demo works fine 1`] = `
             </div>
             
           </div>
-          <!--v-if-->
+          <!---->
           <!---->
         </div>
       </div>
diff --git a/src/avatar/__test__/index.test.jsx b/src/avatar/__test__/index.test.jsx
index a10f4f8e..b23dbfc9 100644
--- a/src/avatar/__test__/index.test.jsx
+++ b/src/avatar/__test__/index.test.jsx
@@ -4,7 +4,7 @@ import { describe, it, expect, vi } from 'vitest';
 import { UserIcon } from 'tdesign-icons-vue-next';
 import Avatar from '../avatar.vue';
 import AvatarGroup from '../avatar-group.vue';
-import Badge from '../../badge/badge.vue';
+import Badge from '../../badge/badge';
 
 const IMAGE = 'https://tdesign.gtimg.com/site/avatar.jpg';
 const IMAGE_FAIL = 'https://tdesign.gtimg.com/mobile/demos/avatar_11112233.png';
diff --git a/src/badge/__test__/__snapshots__/demo.test.jsx.snap b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
index b5ede3f6..fdea1e9f 100644
--- a/src/badge/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
@@ -26,9 +26,9 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         style="right: -4px; top: 4px;"
       >
-        <!--v-if-->
-          
-        <!--v-if-->
+        <!---->
+        
+        <!---->
       </div>
       <!---->
     </div>
@@ -53,9 +53,9 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         style="right: 1px; top: -1px;"
       >
-        <!--v-if-->
-          
-        <!--v-if-->
+        <!---->
+        
+        <!---->
       </div>
       <!---->
     </div>
@@ -88,9 +88,9 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         style="right: 1px; top: 1px;"
       >
-        <!--v-if-->
-          
-        <!--v-if-->
+        <!---->
+        
+        <!---->
       </div>
       <!---->
     </div>
@@ -119,9 +119,9 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: -8px; top: 0px;"
       >
-        <!--v-if-->
-         8 
-        <!--v-if-->
+        <!---->
+        8
+        <!---->
       </div>
       <!---->
     </div>
@@ -146,9 +146,9 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: -2px; top: -2px;"
       >
-        <!--v-if-->
-         2 
-        <!--v-if-->
+        <!---->
+        2
+        <!---->
       </div>
       <!---->
     </div>
@@ -181,9 +181,9 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: 2px; top: 2px;"
       >
-        <!--v-if-->
-         8 
-        <!--v-if-->
+        <!---->
+        8
+        <!---->
       </div>
       <!---->
     </div>
@@ -236,9 +236,9 @@ exports[`Badge > Badge baseVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: 0px; top: 2px;"
       >
-        <!--v-if-->
-         NEW 
-        <!--v-if-->
+        <!---->
+        NEW
+        <!---->
       </div>
       <!---->
     </div>
@@ -302,9 +302,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
               style="right: -4px; top: 4px;"
             >
-              <!--v-if-->
-                
-              <!--v-if-->
+              <!---->
+              
+              <!---->
             </div>
             <!---->
           </div>
@@ -329,9 +329,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
               style="right: 1px; top: -1px;"
             >
-              <!--v-if-->
-                
-              <!--v-if-->
+              <!---->
+              
+              <!---->
             </div>
             <!---->
           </div>
@@ -364,9 +364,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
               style="right: 1px; top: 1px;"
             >
-              <!--v-if-->
-                
-              <!--v-if-->
+              <!---->
+              
+              <!---->
             </div>
             <!---->
           </div>
@@ -395,9 +395,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: -8px; top: 0px;"
             >
-              <!--v-if-->
-               8 
-              <!--v-if-->
+              <!---->
+              8
+              <!---->
             </div>
             <!---->
           </div>
@@ -422,9 +422,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: -2px; top: -2px;"
             >
-              <!--v-if-->
-               2 
-              <!--v-if-->
+              <!---->
+              2
+              <!---->
             </div>
             <!---->
           </div>
@@ -457,9 +457,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: 2px; top: 2px;"
             >
-              <!--v-if-->
-               8 
-              <!--v-if-->
+              <!---->
+              8
+              <!---->
             </div>
             <!---->
           </div>
@@ -512,9 +512,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: 0px; top: 2px;"
             >
-              <!--v-if-->
-               NEW 
-              <!--v-if-->
+              <!---->
+              NEW
+              <!---->
             </div>
             <!---->
           </div>
@@ -570,9 +570,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               style="right: -2px; top: -2px;"
             >
-              <!--v-if-->
-               2 
-              <!--v-if-->
+              <!---->
+              2
+              <!---->
             </div>
             <!---->
           </div>
@@ -606,9 +606,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
               class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count"
               style="right: -2px; top: -2px;"
             >
-              <!--v-if-->
-               2 
-              <!--v-if-->
+              <!---->
+              2
+              <!---->
             </div>
             <!---->
           </div>
@@ -660,9 +660,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
             <div
               class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count"
             >
-              <!--v-if-->
-               领积分 
-              <!--v-if-->
+              <!---->
+              领积分
+              <!---->
             </div>
             <!---->
           </div>
@@ -709,7 +709,7 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
                   class="t-badge__ribbon--before"
                   style=""
                 />
-                 New 
+                New
                 <div
                   class="t-badge__ribbon--after"
                   style=""
@@ -790,9 +790,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count"
                   style="right: 7px; top: 7px;"
                 >
-                  <!--v-if-->
-                   8 
-                  <!--v-if-->
+                  <!---->
+                  8
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -846,9 +846,9 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 5px; top: 5px;"
                 >
-                  <!--v-if-->
-                   8 
-                  <!--v-if-->
+                  <!---->
+                  8
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -911,9 +911,9 @@ exports[`Badge > Badge sizeVue demo works fine 1`] = `
             class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count"
             style="right: 7px; top: 7px;"
           >
-            <!--v-if-->
-             8 
-            <!--v-if-->
+            <!---->
+            8
+            <!---->
           </div>
           <!---->
         </div>
@@ -967,9 +967,9 @@ exports[`Badge > Badge sizeVue demo works fine 1`] = `
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 5px; top: 5px;"
           >
-            <!--v-if-->
-             8 
-            <!--v-if-->
+            <!---->
+            8
+            <!---->
           </div>
           <!---->
         </div>
@@ -1010,9 +1010,9 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         style="right: -2px; top: -2px;"
       >
-        <!--v-if-->
-         2 
-        <!--v-if-->
+        <!---->
+        2
+        <!---->
       </div>
       <!---->
     </div>
@@ -1046,9 +1046,9 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
         class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count"
         style="right: -2px; top: -2px;"
       >
-        <!--v-if-->
-         2 
-        <!--v-if-->
+        <!---->
+        2
+        <!---->
       </div>
       <!---->
     </div>
@@ -1100,9 +1100,9 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
       <div
         class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count"
       >
-        <!--v-if-->
-         领积分 
-        <!--v-if-->
+        <!---->
+        领积分
+        <!---->
       </div>
       <!---->
     </div>
@@ -1149,7 +1149,7 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
             class="t-badge__ribbon--before"
             style=""
           />
-           New 
+          New
           <div
             class="t-badge__ribbon--after"
             style=""
diff --git a/src/badge/__test__/index.test.jsx b/src/badge/__test__/index.test.jsx
index ccddbc44..307f8987 100644
--- a/src/badge/__test__/index.test.jsx
+++ b/src/badge/__test__/index.test.jsx
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
-import Badge from '../badge.vue';
+import Badge from '../badge';
 import Button from '../../button/button';
 import config from '../../config';
 
@@ -58,7 +58,7 @@ describe('Badge', () => {
     ['circle', 'ribbon', 'round'].forEach((s) => {
       expect(inner.classes().includes(`${name}--${s}`)).toBeFalsy();
     });
-    expect($badge.text()).toEqual(`${TEXT} ${count}`);
+    expect($badge.text()).toEqual(`${TEXT}${count}`);
 
     const shape = 'ribbon';
     await wrapper.setProps({
diff --git a/src/cell/__test__/__snapshots__/demo.test.jsx.snap b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
index ace6a538..2ee97075 100644
--- a/src/cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -329,9 +329,9 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 >
-                  <!--v-if-->
-                   16 
-                  <!--v-if-->
+                  <!---->
+                  16
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -646,9 +646,9 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                 >
-                  <!--v-if-->
-                   16 
-                  <!--v-if-->
+                  <!---->
+                  16
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -940,7 +940,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                         </div>
                         
                       </div>
-                      <!--v-if-->
+                      <!---->
                       <!---->
                     </div>
                   </div>
@@ -1342,9 +1342,9 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           >
-            <!--v-if-->
-             16 
-            <!--v-if-->
+            <!---->
+            16
+            <!---->
           </div>
           <!---->
         </div>
@@ -1636,7 +1636,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
                   </div>
                   
                 </div>
-                <!--v-if-->
+                <!---->
                 <!---->
               </div>
             </div>
@@ -1827,9 +1827,9 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
           >
-            <!--v-if-->
-             16 
-            <!--v-if-->
+            <!---->
+            16
+            <!---->
           </div>
           <!---->
         </div>
diff --git a/src/grid/__test__/__snapshots__/demo.test.jsx.snap b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
index f33016fa..5e6198cd 100644
--- a/src/grid/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
@@ -68,9 +68,9 @@ exports[`Grid > Grid badgeVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
-          <!--v-if-->
-            
-          <!--v-if-->
+          <!---->
+          
+          <!---->
         </div>
         <!---->
       </div>
@@ -152,9 +152,9 @@ exports[`Grid > Grid badgeVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!--v-if-->
-           8 
-          <!--v-if-->
+          <!---->
+          8
+          <!---->
         </div>
         <!---->
       </div>
@@ -236,9 +236,9 @@ exports[`Grid > Grid badgeVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!--v-if-->
-           13 
-          <!--v-if-->
+          <!---->
+          13
+          <!---->
         </div>
         <!---->
       </div>
@@ -320,9 +320,9 @@ exports[`Grid > Grid badgeVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!--v-if-->
-           NEW 
-          <!--v-if-->
+          <!---->
+          NEW
+          <!---->
         </div>
         <!---->
       </div>
@@ -4617,9 +4617,9 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
               <div
                 class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
               >
-                <!--v-if-->
-                  
-                <!--v-if-->
+                <!---->
+                
+                <!---->
               </div>
               <!---->
             </div>
@@ -4701,9 +4701,9 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
               <div
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               >
-                <!--v-if-->
-                 8 
-                <!--v-if-->
+                <!---->
+                8
+                <!---->
               </div>
               <!---->
             </div>
@@ -4785,9 +4785,9 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
               <div
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               >
-                <!--v-if-->
-                 13 
-                <!--v-if-->
+                <!---->
+                13
+                <!---->
               </div>
               <!---->
             </div>
@@ -4869,9 +4869,9 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
               <div
                 class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
               >
-                <!--v-if-->
-                 NEW 
-                <!--v-if-->
+                <!---->
+                NEW
+                <!---->
               </div>
               <!---->
             </div>
diff --git a/src/grid/__test__/index.test.jsx b/src/grid/__test__/index.test.jsx
index f654b10c..e89089fc 100644
--- a/src/grid/__test__/index.test.jsx
+++ b/src/grid/__test__/index.test.jsx
@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { describe, it, expect } from 'vitest';
 import Grid from '../grid.vue';
 import GridItem from '../grid-item.vue';
-import Badge from '../../badge/badge.vue';
+import Badge from '../../badge/badge';
 
 const prefix = 't';
 const name = `${prefix}-grid`;
diff --git a/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
index c9dbeee5..c92dced8 100644
--- a/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
@@ -29,7 +29,7 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
             选项一
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -64,9 +64,9 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
-          <!--v-if-->
-            
-          <!--v-if-->
+          <!---->
+          
+          <!---->
         </div>
         <!---->
       </div>
@@ -89,7 +89,7 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
             选项三
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -114,9 +114,9 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!--v-if-->
-           6 
-          <!--v-if-->
+          <!---->
+          6
+          <!---->
         </div>
         <!---->
       </div>
@@ -139,7 +139,7 @@ exports[`SideBar > SideBar baseVue demo works fine 1`] = `
             选项五
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -3106,7 +3106,7 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
             选项一
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -3141,9 +3141,9 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
-          <!--v-if-->
-            
-          <!--v-if-->
+          <!---->
+          
+          <!---->
         </div>
         <!---->
       </div>
@@ -3166,7 +3166,7 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
             选项三
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -3191,9 +3191,9 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!--v-if-->
-           6 
-          <!--v-if-->
+          <!---->
+          6
+          <!---->
         </div>
         <!---->
       </div>
@@ -3216,7 +3216,7 @@ exports[`SideBar > SideBar customVue demo works fine 1`] = `
             选项五
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -6332,7 +6332,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
             选项一
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -6367,9 +6367,9 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
-          <!--v-if-->
-            
-          <!--v-if-->
+          <!---->
+          
+          <!---->
         </div>
         <!---->
       </div>
@@ -6392,7 +6392,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
             选项三
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -6417,9 +6417,9 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!--v-if-->
-           6 
-          <!--v-if-->
+          <!---->
+          6
+          <!---->
         </div>
         <!---->
       </div>
@@ -6442,7 +6442,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
             选项五
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -9264,7 +9264,7 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
             选项一
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -9315,9 +9315,9 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
         >
-          <!--v-if-->
-            
-          <!--v-if-->
+          <!---->
+          
+          <!---->
         </div>
         <!---->
       </div>
@@ -9356,7 +9356,7 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
             选项三
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
@@ -9397,9 +9397,9 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
         <div
           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
         >
-          <!--v-if-->
-           6 
-          <!--v-if-->
+          <!---->
+          6
+          <!---->
         </div>
         <!---->
       </div>
@@ -9438,7 +9438,7 @@ exports[`SideBar > SideBar withIconVue demo works fine 1`] = `
             选项五
           </span>
         </div>
-        <!--v-if-->
+        <!---->
         <!---->
       </div>
     </div>
diff --git a/src/tab-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/tab-bar/__test__/__snapshots__/demo.test.jsx.snap
index 57cd3d05..d45e6411 100644
--- a/src/tab-bar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/tab-bar/__test__/__snapshots__/demo.test.jsx.snap
@@ -44,9 +44,9 @@ exports[`TabBar > TabBar badgePropsVue demo works fine 1`] = `
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 0px; top: 0px;"
           >
-            <!--v-if-->
-             16 
-            <!--v-if-->
+            <!---->
+            16
+            <!---->
           </div>
           <!---->
         </div>
@@ -99,9 +99,9 @@ exports[`TabBar > TabBar badgePropsVue demo works fine 1`] = `
             class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
             style="right: 0px; top: 0px;"
           >
-            <!--v-if-->
-              
-            <!--v-if-->
+            <!---->
+            
+            <!---->
           </div>
           <!---->
         </div>
@@ -154,9 +154,9 @@ exports[`TabBar > TabBar badgePropsVue demo works fine 1`] = `
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 0px; top: 0px;"
           >
-            <!--v-if-->
-             New 
-            <!--v-if-->
+            <!---->
+            New
+            <!---->
           </div>
           <!---->
         </div>
@@ -209,9 +209,9 @@ exports[`TabBar > TabBar badgePropsVue demo works fine 1`] = `
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 0px; top: 0px;"
           >
-            <!--v-if-->
-             ··· 
-            <!--v-if-->
+            <!---->
+            ···
+            <!---->
           </div>
           <!---->
         </div>
@@ -1178,9 +1178,9 @@ exports[`TabBar > TabBar mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 0px; top: 0px;"
                 >
-                  <!--v-if-->
-                   16 
-                  <!--v-if-->
+                  <!---->
+                  16
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -1233,9 +1233,9 @@ exports[`TabBar > TabBar mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
                   style="right: 0px; top: 0px;"
                 >
-                  <!--v-if-->
-                    
-                  <!--v-if-->
+                  <!---->
+                  
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -1288,9 +1288,9 @@ exports[`TabBar > TabBar mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 0px; top: 0px;"
                 >
-                  <!--v-if-->
-                   New 
-                  <!--v-if-->
+                  <!---->
+                  New
+                  <!---->
                 </div>
                 <!---->
               </div>
@@ -1343,9 +1343,9 @@ exports[`TabBar > TabBar mobileVue demo works fine 1`] = `
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 0px; top: 0px;"
                 >
-                  <!--v-if-->
-                   ··· 
-                  <!--v-if-->
+                  <!---->
+                  ···
+                  <!---->
                 </div>
                 <!---->
               </div>
diff --git a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
index 7e832989..ecbf915d 100644
--- a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
@@ -51,9 +51,9 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                     class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
                     style="right: -4px; top: 1px;"
                   >
-                    <!--v-if-->
-                      
-                    <!--v-if-->
+                    <!---->
+                    
+                    <!---->
                   </div>
                   <!---->
                 </div>
@@ -83,9 +83,9 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                     class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                     style="right: -8px; top: 3px;"
                   >
-                    <!--v-if-->
-                     8 
-                    <!--v-if-->
+                    <!---->
+                    8
+                    <!---->
                   </div>
                   <!---->
                 </div>
@@ -111,7 +111,7 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -213,7 +213,7 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -238,7 +238,7 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -263,7 +263,7 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -383,7 +383,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -408,7 +408,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -492,7 +492,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -517,7 +517,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -542,7 +542,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -636,7 +636,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -661,7 +661,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -686,7 +686,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -711,7 +711,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -817,7 +817,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -842,7 +842,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -867,7 +867,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -892,7 +892,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -917,7 +917,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1054,7 +1054,7 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1092,7 +1092,7 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1130,7 +1130,7 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1232,7 +1232,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1257,7 +1257,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1282,7 +1282,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1307,7 +1307,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1332,7 +1332,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1357,7 +1357,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1382,7 +1382,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1407,7 +1407,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1432,7 +1432,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -1543,7 +1543,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1568,7 +1568,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1652,7 +1652,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1677,7 +1677,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1702,7 +1702,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1796,7 +1796,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1821,7 +1821,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1846,7 +1846,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1871,7 +1871,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -1977,7 +1977,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2002,7 +2002,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2027,7 +2027,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2052,7 +2052,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2077,7 +2077,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2218,7 +2218,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2243,7 +2243,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2268,7 +2268,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2293,7 +2293,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2318,7 +2318,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2343,7 +2343,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2368,7 +2368,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2393,7 +2393,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2418,7 +2418,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2521,7 +2521,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2559,7 +2559,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2597,7 +2597,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2720,9 +2720,9 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
                           style="right: -4px; top: 1px;"
                         >
-                          <!--v-if-->
-                            
-                          <!--v-if-->
+                          <!---->
+                          
+                          <!---->
                         </div>
                         <!---->
                       </div>
@@ -2752,9 +2752,9 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                           style="right: -8px; top: 3px;"
                         >
-                          <!--v-if-->
-                           8 
-                          <!--v-if-->
+                          <!---->
+                          8
+                          <!---->
                         </div>
                         <!---->
                       </div>
@@ -2780,7 +2780,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2899,7 +2899,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2924,7 +2924,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -2949,7 +2949,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3086,7 +3086,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3111,7 +3111,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3136,7 +3136,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3259,7 +3259,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3284,7 +3284,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3309,7 +3309,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3334,7 +3334,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3440,7 +3440,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3465,7 +3465,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3490,7 +3490,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3515,7 +3515,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3646,7 +3646,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3671,7 +3671,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3696,7 +3696,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3721,7 +3721,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3825,7 +3825,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3850,7 +3850,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3877,7 +3877,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -3902,7 +3902,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                           </div>
                           
                         </div>
-                        <!--v-if-->
+                        <!---->
                         <!---->
                       </div>
                       <!--v-if-->
@@ -4018,7 +4018,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4043,7 +4043,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4068,7 +4068,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4093,7 +4093,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4199,7 +4199,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4224,7 +4224,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4249,7 +4249,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4274,7 +4274,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4388,7 +4388,7 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4413,7 +4413,7 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4438,7 +4438,7 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4540,7 +4540,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4565,7 +4565,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4590,7 +4590,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4615,7 +4615,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4719,7 +4719,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4744,7 +4744,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4771,7 +4771,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->
@@ -4796,7 +4796,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                     </div>
                     
                   </div>
-                  <!--v-if-->
+                  <!---->
                   <!---->
                 </div>
                 <!--v-if-->