From 54fab50c3c37f4e8bf1a25b305af756b3ccde96e Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 15 Dec 2020 17:01:55 +0800
Subject: [PATCH] docs: remove legacy locale mixin

---
 docs/site/demo-locale.js      |  34 ---------
 src/badge/demo/index.vue      |  35 ++++++----
 src/button/demo/index.vue     | 127 ++++++++++++++++++----------------
 src/cell/demo/index.vue       |  67 ++++++++++--------
 src/checkbox/demo/index.vue   |  67 +++++++++---------
 src/col/demo/index.vue        |  35 +++++-----
 src/divider/demo/index.vue    |  39 ++++++-----
 src/grid/demo/index.vue       |  59 +++++++++-------
 src/index-bar/demo/index.vue  |  27 ++++----
 src/loading/demo/index.vue    |  39 ++++++-----
 src/notice-bar/demo/index.vue |  51 ++++++++------
 src/overlay/demo/index.vue    |  31 +++++----
 src/popup/demo/index.vue      |  67 +++++++++---------
 src/progress/demo/index.vue   |  31 +++++----
 src/radio/demo/index.vue      |  59 ++++++++--------
 src/stepper/demo/index.vue    |  47 +++++++------
 src/sticky/demo/index.vue     |  32 +++++----
 src/tag/demo/index.vue        |  73 +++++++++----------
 18 files changed, 488 insertions(+), 432 deletions(-)

diff --git a/docs/site/demo-locale.js b/docs/site/demo-locale.js
index e83d8ec51..e9df61e0e 100644
--- a/docs/site/demo-locale.js
+++ b/docs/site/demo-locale.js
@@ -1,51 +1,17 @@
 import Locale from '../../src/locale';
 import enUS from '../../src/locale/lang/en-US';
-import { get } from '../../src/utils';
-import { camelize } from '../../src/utils/format/string';
 
 Locale.add({
   'en-US': enUS,
 });
 
-let demoUid = 0;
-
 export const DemoLocaleMixin = {
   computed: {
-    t() {
-      const { name } = this.$options;
-      const prefix = name ? camelize(name) + '.' : '';
-      const messages = Locale.messages();
-
-      return (path, ...args) => {
-        const message = get(messages, prefix + path) || get(messages, path);
-        return typeof message === 'function' ? message(...args) : message;
-      };
-    },
-
     // flag for vant-weapp demos
     isWeapp() {
       return location.search.indexOf('weapp=1') !== -1;
     },
   },
-
-  beforeCreate() {
-    if (!this.$options.name) {
-      this.$options.name = `demo-${demoUid++}`;
-    }
-
-    const { i18n, name } = this.$options;
-
-    if (i18n && name) {
-      const locales = {};
-      const camelizedName = camelize(name);
-
-      Object.keys(i18n).forEach((key) => {
-        locales[key] = { [camelizedName]: i18n[key] };
-      });
-
-      Locale.add(locales);
-    }
-  },
 };
 
 // switch lang after routing
diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index c5e8be9b1..8fb338850 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -31,21 +31,28 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    max: '最大值',
+    standalone: '独立展示',
+    customColor: '自定义颜色',
+    customContent: '自定义徽标内容',
+  },
+  'en-US': {
+    max: 'Max',
+    standalone: 'Standalone',
+    customColor: 'Custom Color',
+    customContent: 'Custom Content',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      max: '最大值',
-      standalone: '独立展示',
-      customColor: '自定义颜色',
-      customContent: '自定义徽标内容',
-    },
-    'en-US': {
-      max: 'Max',
-      standalone: 'Standalone',
-      customColor: 'Custom Color',
-      customContent: 'Custom Content',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index 3f8651384..8d0ebd226 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -72,67 +72,74 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    type: '按钮类型',
+    size: '按钮尺寸',
+    icon: '图标按钮',
+    loading: '加载状态',
+    shape: '按钮形状',
+    default: '默认按钮',
+    primary: '主要按钮',
+    success: '成功按钮',
+    danger: '危险按钮',
+    warning: '警告按钮',
+    large: '大号按钮',
+    normal: '普通按钮',
+    small: '小型按钮',
+    mini: '迷你按钮',
+    plain: '朴素按钮',
+    square: '方形按钮',
+    round: '圆形按钮',
+    hairline: '细边框',
+    hairlineButton: '细边框按钮',
+    loadingText: '加载中...',
+    router: '页面导航',
+    urlRoute: 'URL 跳转',
+    vueRoute: '路由跳转',
+    customColor: '自定义颜色',
+    pure: '单色按钮',
+    gradient: '渐变色按钮',
+    blockElement: '块级元素',
+  },
+  'en-US': {
+    type: 'Type',
+    size: 'Size',
+    icon: 'Icon',
+    loading: 'Loading',
+    shape: 'Shape',
+    default: 'Default',
+    primary: 'Primary',
+    success: 'Success',
+    danger: 'Danger',
+    warning: 'Warning',
+    large: 'Large',
+    normal: 'Normal',
+    small: 'Small',
+    mini: 'Mini',
+    plain: 'Plain',
+    square: 'Square',
+    round: 'Round',
+    hairline: 'Hairline',
+    hairlineButton: 'Hairline',
+    loadingText: 'Loading...',
+    router: 'Router',
+    urlRoute: 'URL',
+    vueRoute: 'Vue Router',
+    customColor: 'Custom Color',
+    pure: 'Pure',
+    gradient: 'Gradient',
+    blockElement: 'Block Element',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      type: '按钮类型',
-      size: '按钮尺寸',
-      icon: '图标按钮',
-      loading: '加载状态',
-      shape: '按钮形状',
-      default: '默认按钮',
-      primary: '主要按钮',
-      success: '成功按钮',
-      danger: '危险按钮',
-      warning: '警告按钮',
-      large: '大号按钮',
-      normal: '普通按钮',
-      small: '小型按钮',
-      mini: '迷你按钮',
-      plain: '朴素按钮',
-      square: '方形按钮',
-      round: '圆形按钮',
-      hairline: '细边框',
-      hairlineButton: '细边框按钮',
-      loadingText: '加载中...',
-      router: '页面导航',
-      urlRoute: 'URL 跳转',
-      vueRoute: '路由跳转',
-      customColor: '自定义颜色',
-      pure: '单色按钮',
-      gradient: '渐变色按钮',
-      blockElement: '块级元素',
-    },
-    'en-US': {
-      type: 'Type',
-      size: 'Size',
-      icon: 'Icon',
-      loading: 'Loading',
-      shape: 'Shape',
-      default: 'Default',
-      primary: 'Primary',
-      success: 'Success',
-      danger: 'Danger',
-      warning: 'Warning',
-      large: 'Large',
-      normal: 'Normal',
-      small: 'Small',
-      mini: 'Mini',
-      plain: 'Plain',
-      square: 'Square',
-      round: 'Round',
-      hairline: 'Hairline',
-      hairlineButton: 'Hairline',
-      loadingText: 'Loading...',
-      router: 'Router',
-      urlRoute: 'URL',
-      vueRoute: 'Vue Router',
-      customColor: 'Custom Color',
-      pure: 'Pure',
-      gradient: 'Gradient',
-      blockElement: 'Block Element',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/cell/demo/index.vue b/src/cell/demo/index.vue
index 77678dce1..9f0b950b1 100644
--- a/src/cell/demo/index.vue
+++ b/src/cell/demo/index.vue
@@ -74,37 +74,44 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    cell: '单元格',
+    valueOnly: '只设置 value',
+    showIcon: '展示图标',
+    showArrow: '展示箭头',
+    largeSize: '单元格大小',
+    group: '分组',
+    groupTitle: '分组标题',
+    router: '页面导航',
+    urlRoute: 'URL 跳转',
+    vueRoute: '路由跳转',
+    useSlots: '使用插槽',
+    verticalCenter: '垂直居中',
+  },
+  'en-US': {
+    cell: 'Cell title',
+    valueOnly: 'Value only',
+    showIcon: 'Left Icon',
+    showArrow: 'Link',
+    largeSize: 'Size',
+    group: 'Group',
+    groupTitle: 'Group Title',
+    router: 'Router',
+    urlRoute: 'URL',
+    vueRoute: 'Vue Router',
+    useSlots: 'Use Slots',
+    verticalCenter: 'Vertical center',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      cell: '单元格',
-      valueOnly: '只设置 value',
-      showIcon: '展示图标',
-      showArrow: '展示箭头',
-      largeSize: '单元格大小',
-      group: '分组',
-      groupTitle: '分组标题',
-      router: '页面导航',
-      urlRoute: 'URL 跳转',
-      vueRoute: '路由跳转',
-      useSlots: '使用插槽',
-      verticalCenter: '垂直居中',
-    },
-    'en-US': {
-      cell: 'Cell title',
-      valueOnly: 'Value only',
-      showIcon: 'Left Icon',
-      showArrow: 'Link',
-      largeSize: 'Size',
-      group: 'Group',
-      groupTitle: 'Group Title',
-      router: 'Router',
-      urlRoute: 'URL',
-      vueRoute: 'Vue Router',
-      useSlots: 'Use Slots',
-      verticalCenter: 'Vertical center',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index 8cee21388..6123c97fa 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -105,43 +105,45 @@
 
 <script>
 import { ref, reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import { useRefs } from '../../composables/use-refs';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      checkbox: '复选框',
-      customIcon: '自定义图标',
-      customIconSize: '自定义大小',
-      customColor: '自定义颜色',
-      customShape: '自定义形状',
-      title3: '复选框组',
-      title4: '限制最大可选数',
-      title5: '搭配单元格组件使用',
-      toggleAll: '全选与反选',
-      checkAll: '全选',
-      inverse: '反选',
-      horizontal: '水平排列',
-      disableLabel: '禁用文本点击',
-    },
-    'en-US': {
-      checkbox: 'Checkbox',
-      customIcon: 'Custom Icon',
-      customIconSize: 'Custom Icon Size',
-      customColor: 'Custom Color',
-      customShape: 'Custom Shape',
-      title3: 'Checkbox Group',
-      title4: 'Maximum amount of checked options',
-      title5: 'Inside a Cell',
-      toggleAll: 'Toggle All',
-      checkAll: 'Check All',
-      inverse: 'Inverse',
-      horizontal: 'Horizontal',
-      disableLabel: 'Disable label click',
-    },
+const i18n = {
+  'zh-CN': {
+    checkbox: '复选框',
+    customIcon: '自定义图标',
+    customIconSize: '自定义大小',
+    customColor: '自定义颜色',
+    customShape: '自定义形状',
+    title3: '复选框组',
+    title4: '限制最大可选数',
+    title5: '搭配单元格组件使用',
+    toggleAll: '全选与反选',
+    checkAll: '全选',
+    inverse: '反选',
+    horizontal: '水平排列',
+    disableLabel: '禁用文本点击',
   },
+  'en-US': {
+    checkbox: 'Checkbox',
+    customIcon: 'Custom Icon',
+    customIconSize: 'Custom Icon Size',
+    customColor: 'Custom Color',
+    customShape: 'Custom Shape',
+    title3: 'Checkbox Group',
+    title4: 'Maximum amount of checked options',
+    title5: 'Inside a Cell',
+    toggleAll: 'Toggle All',
+    checkAll: 'Check All',
+    inverse: 'Inverse',
+    horizontal: 'Horizontal',
+    disableLabel: 'Disable label click',
+  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       checkbox1: true,
       checkbox2: true,
@@ -174,6 +176,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       group,
       toggle,
       setRefs,
diff --git a/src/col/demo/index.vue b/src/col/demo/index.vue
index 991b83d43..4ddd66c14 100644
--- a/src/col/demo/index.vue
+++ b/src/col/demo/index.vue
@@ -8,15 +8,11 @@
 
     <van-row>
       <van-col span="4">span: 4</van-col>
-      <van-col span="10" offset="4">
-        offset: 4, span: 10
-      </van-col>
+      <van-col span="10" offset="4"> offset: 4, span: 10 </van-col>
     </van-row>
 
     <van-row>
-      <van-col offset="12" span="12">
-        offset: 12, span: 12
-      </van-col>
+      <van-col offset="12" span="12"> offset: 12, span: 12 </van-col>
     </van-row>
   </demo-block>
 
@@ -55,17 +51,24 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    title2: '在列元素之间增加间距',
+    justify: '对齐方式',
+  },
+  'en-US': {
+    title2: 'Column Spacing',
+    justify: 'Justify Content',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      title2: '在列元素之间增加间距',
-      justify: '对齐方式',
-    },
-    'en-US': {
-      title2: 'Column Spacing',
-      justify: 'Justify Content',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index 841dc1a1c..e6c06caa2 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -34,23 +34,30 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    dashed: '虚线',
+    withText: '展示文本',
+    contentPosition: '内容位置',
+    customStyle: '自定义样式',
+  },
+  'en-US': {
+    text: 'Text',
+    dashed: 'Dashed',
+    withText: 'With Text',
+    contentPosition: 'Content Position',
+    customStyle: 'Custom Style',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '文本',
-      dashed: '虚线',
-      withText: '展示文本',
-      contentPosition: '内容位置',
-      customStyle: '自定义样式',
-    },
-    'en-US': {
-      text: 'Text',
-      dashed: 'Dashed',
-      withText: 'With Text',
-      contentPosition: 'Content Position',
-      customStyle: 'Custom Style',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue
index c9bea75a0..8882e827a 100644
--- a/src/grid/demo/index.vue
+++ b/src/grid/demo/index.vue
@@ -64,33 +64,40 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文字',
+    route: '页面导航',
+    gutter: '格子间距',
+    square: '正方形格子',
+    columnNum: '自定义列数',
+    customContent: '自定义内容',
+    urlRoute: 'URL 跳转',
+    vueRoute: '路由跳转',
+    showBadge: '徽标提示',
+    horizontal: '内容横排',
+  },
+  'en-US': {
+    text: 'Text',
+    route: 'Route',
+    gutter: 'Gutter',
+    square: 'Square',
+    columnNum: 'Column Num',
+    customContent: 'Custom Content',
+    urlRoute: 'URL',
+    vueRoute: 'Vue Router',
+    showBadge: 'Show Badge',
+    horizontal: 'Horizontal',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '文字',
-      route: '页面导航',
-      gutter: '格子间距',
-      square: '正方形格子',
-      columnNum: '自定义列数',
-      customContent: '自定义内容',
-      urlRoute: 'URL 跳转',
-      vueRoute: '路由跳转',
-      showBadge: '徽标提示',
-      horizontal: '内容横排',
-    },
-    'en-US': {
-      text: 'Text',
-      route: 'Route',
-      gutter: 'Gutter',
-      square: 'Square',
-      columnNum: 'Column Num',
-      customContent: 'Custom Content',
-      urlRoute: 'URL',
-      vueRoute: 'Vue Router',
-      showBadge: 'Show Badge',
-      horizontal: 'Horizontal',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/index-bar/demo/index.vue b/src/index-bar/demo/index.vue
index d7476a69c..117f7fcdd 100644
--- a/src/index-bar/demo/index.vue
+++ b/src/index-bar/demo/index.vue
@@ -26,22 +26,24 @@
   </van-tabs>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '文本',
+    customIndexList: '自定义索引列表',
+  },
+  'en-US': {
+    text: 'Text',
+    customIndexList: 'Custom Index List',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '文本',
-      customIndexList: '自定义索引列表',
-    },
-    'en-US': {
-      text: 'Text',
-      customIndexList: 'Custom Index List',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const activeTab = ref(0);
     const indexList = [];
     const charCodeOfA = 'A'.charCodeAt(0);
@@ -51,6 +53,7 @@ export default {
     }
 
     return {
+      t,
       activeTab,
       indexList,
       customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],
diff --git a/src/loading/demo/index.vue b/src/loading/demo/index.vue
index 10ed6b3c7..ed14596b9 100644
--- a/src/loading/demo/index.vue
+++ b/src/loading/demo/index.vue
@@ -27,23 +27,30 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    type: '加载类型',
+    text: '加载文案',
+    size: '自定义大小',
+    color: '自定义颜色',
+    vertical: '垂直排列',
+  },
+  'en-US': {
+    type: 'Type',
+    text: 'Text',
+    size: 'Size',
+    color: 'Color',
+    vertical: 'Vertical',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      type: '加载类型',
-      text: '加载文案',
-      size: '自定义大小',
-      color: '自定义颜色',
-      vertical: '垂直排列',
-    },
-    'en-US': {
-      type: 'Type',
-      text: 'Text',
-      size: 'Size',
-      color: 'Color',
-      vertical: 'Vertical',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/notice-bar/demo/index.vue b/src/notice-bar/demo/index.vue
index 0e4154384..a25782004 100644
--- a/src/notice-bar/demo/index.vue
+++ b/src/notice-bar/demo/index.vue
@@ -42,29 +42,36 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
+    mode: '通知栏模式',
+    content: '内容',
+    wrapable: '多行展示',
+    shortText: '技术是开发它的人的共同灵魂。',
+    scrollable: '滚动播放',
+    customStyle: '自定义样式',
+    verticalScroll: '垂直滚动',
+  },
+  'en-US': {
+    text: 'Technology is the common soul of the people who developed it.',
+    mode: 'Mode',
+    content: 'Content',
+    wrapable: 'Wrapable',
+    shortText: 'Some short text.',
+    customStyle: 'Custom Style',
+    scrollable: 'Scrollable',
+    verticalScroll: 'Vertical Scroll',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
-      mode: '通知栏模式',
-      content: '内容',
-      wrapable: '多行展示',
-      shortText: '技术是开发它的人的共同灵魂。',
-      scrollable: '滚动播放',
-      customStyle: '自定义样式',
-      verticalScroll: '垂直滚动',
-    },
-    'en-US': {
-      text: 'Technology is the common soul of the people who developed it.',
-      mode: 'Mode',
-      content: 'Content',
-      wrapable: 'Wrapable',
-      shortText: 'Some short text.',
-      customStyle: 'Custom Style',
-      scrollable: 'Scrollable',
-      verticalScroll: 'Vertical Scroll',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index 60225c58d..4c55ab286 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -24,28 +24,33 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    showOverlay: '显示遮罩层',
+    embeddedContent: '嵌入内容',
+  },
+  'en-US': {
+    showOverlay: 'Show Overlay',
+    embeddedContent: 'Embedded Content',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      showOverlay: '显示遮罩层',
-      embeddedContent: '嵌入内容',
-    },
-    'en-US': {
-      showOverlay: 'Show Overlay',
-      embeddedContent: 'Embedded Content',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       show: false,
       showEmbedded: false,
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index 0c10c6d05..edae7ec1f 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -93,40 +93,42 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    position: '弹出位置',
+    buttonBasic: '展示弹出层',
+    buttonTop: '顶部弹出',
+    buttonBottom: '底部弹出',
+    buttonLeft: '左侧弹出',
+    buttonRight: '右侧弹出',
+    teleport: '指定挂载节点',
+    roundCorner: '圆角弹窗',
+    closeIcon: '关闭图标',
+    customCloseIcon: '自定义图标',
+    customIconPosition: '图标位置',
+  },
+  'en-US': {
+    position: 'Position',
+    buttonBasic: 'Show Popup',
+    buttonTop: 'From Top',
+    buttonBottom: 'From Bottom',
+    buttonLeft: 'From Left',
+    buttonRight: 'From Right',
+    teleport: 'Get Container',
+    roundCorner: 'Round Corner',
+    closeIcon: 'Close Icon',
+    customCloseIcon: 'Custom Icon',
+    customIconPosition: 'Icon Position',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      position: '弹出位置',
-      buttonBasic: '展示弹出层',
-      buttonTop: '顶部弹出',
-      buttonBottom: '底部弹出',
-      buttonLeft: '左侧弹出',
-      buttonRight: '右侧弹出',
-      teleport: '指定挂载节点',
-      roundCorner: '圆角弹窗',
-      closeIcon: '关闭图标',
-      customCloseIcon: '自定义图标',
-      customIconPosition: '图标位置',
-    },
-    'en-US': {
-      position: 'Position',
-      buttonBasic: 'Show Popup',
-      buttonTop: 'From Top',
-      buttonBottom: 'From Bottom',
-      buttonLeft: 'From Left',
-      buttonRight: 'From Right',
-      teleport: 'Get Container',
-      roundCorner: 'Round Corner',
-      closeIcon: 'Close Icon',
-      customCloseIcon: 'Custom Icon',
-      customIconPosition: 'Icon Position',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       showBasic: false,
       showTop: false,
@@ -140,7 +142,10 @@ export default {
       showCustomIconPosition: false,
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>
diff --git a/src/progress/demo/index.vue b/src/progress/demo/index.vue
index e6f0498f7..0986dd226 100644
--- a/src/progress/demo/index.vue
+++ b/src/progress/demo/index.vue
@@ -23,19 +23,26 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    title2: '置灰',
+    title3: '样式定制',
+    strokeWidth: '线条粗细',
+  },
+  'en-US': {
+    title2: 'Inactive',
+    title3: 'Custom Style',
+    strokeWidth: 'Stroke Width',
+  },
+};
+
 export default {
-  i18n: {
-    'zh-CN': {
-      title2: '置灰',
-      title3: '样式定制',
-      strokeWidth: '线条粗细',
-    },
-    'en-US': {
-      title2: 'Inactive',
-      title3: 'Custom Style',
-      strokeWidth: 'Stroke Width',
-    },
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index c43f02433..f12392d21 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -91,38 +91,40 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    radio: '单选框',
+    text1: '未选中禁用',
+    text2: '选中且禁用',
+    withCell: '与 Cell 组件一起使用',
+    horizontal: '水平排列',
+    customIcon: '自定义图标',
+    customColor: '自定义颜色',
+    customShape: '自定义形状',
+    customIconSize: '自定义大小',
+    disableLabel: '禁用文本点击',
+  },
+  'en-US': {
+    radio: 'Radio',
+    text1: 'Disabled',
+    text2: 'Disabled and checked',
+    withCell: 'Inside a Cell',
+    horizontal: 'Hrizontal',
+    customIcon: 'Custom Icon',
+    customColor: 'Custom Color',
+    customShape: 'Custom Shape',
+    customIconSize: 'Custom Icon Size',
+    disableLabel: 'Disable label click',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      radio: '单选框',
-      text1: '未选中禁用',
-      text2: '选中且禁用',
-      withCell: '与 Cell 组件一起使用',
-      horizontal: '水平排列',
-      customIcon: '自定义图标',
-      customColor: '自定义颜色',
-      customShape: '自定义形状',
-      customIconSize: '自定义大小',
-      disableLabel: '禁用文本点击',
-    },
-    'en-US': {
-      radio: 'Radio',
-      text1: 'Disabled',
-      text2: 'Disabled and checked',
-      withCell: 'Inside a Cell',
-      horizontal: 'Hrizontal',
-      customIcon: 'Custom Icon',
-      customColor: 'Custom Color',
-      customShape: 'Custom Shape',
-      customIconSize: 'Custom Icon Size',
-      disableLabel: 'Disable label click',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       radio1: '1',
       radio2: '2',
@@ -137,6 +139,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
       inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
     };
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index 8059dc6e6..82c4515b2 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -47,33 +47,35 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
-    'zh-CN': {
-      step: '步长设置',
-      range: '限制输入范围',
-      integer: '限制输入整数',
-      roundTheme: '圆角风格',
-      customSize: '自定义大小',
-      beforeChange: '异步变更',
-      disableInput: '禁用输入框',
-      decimalLength: '固定小数位数',
-    },
-    'en-US': {
-      step: 'Step',
-      range: 'Range',
-      integer: 'Integer',
-      roundTheme: 'Round Theme',
-      customSize: 'Custom Size',
-      beforeChange: 'Before Change',
-      disableInput: 'Disable Input',
-      decimalLength: 'Decimal Length',
-    },
+const i18n = {
+  'zh-CN': {
+    step: '步长设置',
+    range: '限制输入范围',
+    integer: '限制输入整数',
+    roundTheme: '圆角风格',
+    customSize: '自定义大小',
+    beforeChange: '异步变更',
+    disableInput: '禁用输入框',
+    decimalLength: '固定小数位数',
   },
+  'en-US': {
+    step: 'Step',
+    range: 'Range',
+    integer: 'Integer',
+    roundTheme: 'Round Theme',
+    customSize: 'Custom Size',
+    beforeChange: 'Before Change',
+    disableInput: 'Disable Input',
+    decimalLength: 'Decimal Length',
+  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       stepper1: 1,
       stepper2: 1,
@@ -100,6 +102,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       beforeChange,
     };
   },
diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue
index 9b7c424ef..9f0ad7f78 100644
--- a/src/sticky/demo/index.vue
+++ b/src/sticky/demo/index.vue
@@ -26,24 +26,30 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    offsetTop: '吸顶距离',
+    setContainer: '指定容器',
+  },
+  'en-US': {
+    offsetTop: 'Offset Top',
+    setContainer: 'Set Container',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      offsetTop: '吸顶距离',
-      setContainer: '指定容器',
-    },
-    'en-US': {
-      offsetTop: 'Offset Top',
-      setContainer: 'Set Container',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const container = ref(null);
-    return { container };
+
+    return {
+      t,
+      container,
+    };
   },
 };
 </script>
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index 7e7adacbc..7cedb27b4 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -62,51 +62,54 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
+  'zh-CN': {
+    type: '类型',
+    mark: '标记样式',
+    plain: '空心样式',
+    round: '圆角样式',
+    tagStyle: '样式风格',
+    closeable: '可关闭标签',
+    smallSize: '小号标签',
+    largeSize: '大号标签',
+    mediumSize: '中号标签',
+    customSize: '标签大小',
+    customColor: '自定义颜色',
+    customBgColor: '背景颜色',
+    customTextColor: '文字颜色',
+    customPlainColor: '空心颜色',
+  },
+  'en-US': {
+    mark: 'Mark style',
+    plain: 'Plain style',
+    round: 'Round 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',
+  },
+};
 
 export default {
-  i18n: {
-    'zh-CN': {
-      type: '类型',
-      mark: '标记样式',
-      plain: '空心样式',
-      round: '圆角样式',
-      tagStyle: '样式风格',
-      closeable: '可关闭标签',
-      smallSize: '小号标签',
-      largeSize: '大号标签',
-      mediumSize: '中号标签',
-      customSize: '标签大小',
-      customColor: '自定义颜色',
-      customBgColor: '背景颜色',
-      customTextColor: '文字颜色',
-      customPlainColor: '空心颜色',
-    },
-    'en-US': {
-      mark: 'Mark style',
-      plain: 'Plain style',
-      round: 'Round 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',
-    },
-  },
-
   setup() {
+    const t = useTranslate(i18n);
     const show = ref(true);
     const close = () => {
       show.value = false;
     };
 
     return {
+      t,
       show,
       close,
     };