From 125f77a48b6f259dd298a6ebaae305af8a82a839 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 27 Aug 2021 10:24:37 +0800
Subject: [PATCH] chore: update demo i18n (#9342)

---
 src/action-bar/demo/index.vue             | 6 ++----
 src/action-sheet/demo/index.vue           | 6 ++----
 src/address-edit/demo/index.vue           | 6 ++----
 src/address-list/demo/index.vue           | 5 ++---
 src/area/demo/index.vue                   | 5 ++---
 src/badge/demo/index.vue                  | 6 ++----
 src/button/demo/index.vue                 | 6 ++----
 src/card/demo/index.vue                   | 5 ++---
 src/cascader/demo/index.vue               | 5 ++---
 src/cell/demo/index.vue                   | 6 ++----
 src/checkbox/demo/index.vue               | 5 ++---
 src/circle/demo/index.vue                 | 5 ++---
 src/col/demo/index.vue                    | 6 ++----
 src/collapse/demo/index.vue               | 5 ++---
 src/config-provider/demo/index.vue        | 5 ++---
 src/contact-card/demo/index.vue           | 6 ++----
 src/contact-edit/demo/index.vue           | 5 ++---
 src/contact-list/demo/index.vue           | 5 ++---
 src/count-down/demo/index.vue             | 5 ++---
 src/coupon-list/demo/index.vue            | 5 ++---
 src/datetime-picker/demo/index.vue        | 5 ++---
 src/dialog/demo/index.vue                 | 5 ++---
 src/divider/demo/index.vue                | 6 ++----
 src/dropdown-menu/demo/index.vue          | 5 ++---
 src/empty/demo/index.vue                  | 5 ++---
 src/field/demo/Autosize.vue               | 5 ++---
 src/field/demo/BasicUsage.vue             | 5 ++---
 src/field/demo/CustomType.vue             | 5 ++---
 src/field/demo/Disabled.vue               | 6 ++----
 src/field/demo/ErrorInfo.vue              | 5 ++---
 src/field/demo/FormatValue.vue            | 5 ++---
 src/field/demo/InputAlign.vue             | 5 ++---
 src/field/demo/InsertButton.vue           | 5 ++---
 src/field/demo/ShowIcon.vue               | 5 ++---
 src/field/demo/ShowWordLimit.vue          | 5 ++---
 src/form/demo/BasicUsage.vue              | 5 ++---
 src/form/demo/FieldType.vue               | 5 ++---
 src/form/demo/FieldTypeArea.vue           | 5 ++---
 src/form/demo/FieldTypeCalendar.vue       | 5 ++---
 src/form/demo/FieldTypeDatetimePicker.vue | 5 ++---
 src/form/demo/FieldTypePicker.vue         | 5 ++---
 src/form/demo/ValidateRules.vue           | 5 ++---
 src/grid/demo/index.vue                   | 6 ++----
 src/icon/demo/index.vue                   | 5 ++---
 src/image-preview/demo/index.vue          | 5 ++---
 src/image/demo/index.vue                  | 5 ++---
 src/index-bar/demo/index.vue              | 5 ++---
 src/lazyload/demo/index.vue               | 6 ++----
 src/list/demo/index.vue                   | 5 ++---
 src/loading/demo/index.vue                | 6 ++----
 src/nav-bar/demo/index.vue                | 5 ++---
 src/notice-bar/demo/index.vue             | 6 ++----
 src/notify/demo/index.vue                 | 5 ++---
 src/number-keyboard/demo/index.vue        | 5 ++---
 src/overlay/demo/index.vue                | 5 ++---
 src/pagination/demo/index.vue             | 5 ++---
 src/password-input/demo/index.vue         | 5 ++---
 src/picker/demo/index.vue                 | 5 ++---
 src/popover/demo/index.vue                | 5 ++---
 src/popup/demo/index.vue                  | 5 ++---
 src/progress/demo/index.vue               | 6 ++----
 src/pull-refresh/demo/index.vue           | 5 ++---
 src/radio/demo/index.vue                  | 5 ++---
 src/rate/demo/index.vue                   | 5 ++---
 src/search/demo/index.vue                 | 5 ++---
 src/share-sheet/demo/index.vue            | 5 ++---
 src/sidebar/demo/index.vue                | 5 ++---
 src/skeleton/demo/index.vue               | 8 +++-----
 src/slider/demo/index.vue                 | 5 ++---
 src/stepper/demo/index.vue                | 5 ++---
 src/steps/demo/index.vue                  | 5 ++---
 src/sticky/demo/index.vue                 | 5 ++---
 src/style/demo/index.vue                  | 5 ++---
 src/submit-bar/demo/index.vue             | 5 ++---
 src/swipe-cell/demo/index.vue             | 5 ++---
 src/swipe/demo/index.vue                  | 5 ++---
 src/switch/demo/index.vue                 | 5 ++---
 src/tab/demo/index.vue                    | 5 ++---
 src/tabbar/demo/index.vue                 | 5 ++---
 src/tag/demo/index.vue                    | 5 ++---
 src/toast/demo/index.vue                  | 6 ++----
 src/tree-select/demo/index.vue            | 5 ++---
 src/uploader/demo/index.vue               | 6 ++----
 83 files changed, 167 insertions(+), 268 deletions(-)

diff --git a/src/action-bar/demo/index.vue b/src/action-bar/demo/index.vue
index 86cfd3e13..c661d79e7 100644
--- a/src/action-bar/demo/index.vue
+++ b/src/action-bar/demo/index.vue
@@ -2,7 +2,7 @@
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     icon1: '客服',
     icon2: '购物车',
@@ -29,9 +29,7 @@ const i18n = {
     customIconColor: 'Custom Icon Color',
     customButtonColor: 'Custom Button Color',
   },
-};
-
-const t = useTranslate(i18n);
+});
 const onClickIcon = () => Toast(t('clickIcon'));
 const onClickButton = () => Toast(t('clickButton'));
 </script>
diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue
index 64ba73ab5..9d4f03bfe 100644
--- a/src/action-sheet/demo/index.vue
+++ b/src/action-sheet/demo/index.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { ActionSheetAction } from '..';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     option1: '选项一',
     option2: '选项二',
@@ -33,9 +33,7 @@ const i18n = {
     disabledOption: 'Disabled Option',
     showDescription: 'Show Description',
   },
-};
-
-const t = useTranslate(i18n);
+});
 const showBasic = ref(false);
 const showCancel = ref(false);
 const showTitle = ref(false);
diff --git a/src/address-edit/demo/index.vue b/src/address-edit/demo/index.vue
index ce3a676b3..469988211 100644
--- a/src/address-edit/demo/index.vue
+++ b/src/address-edit/demo/index.vue
@@ -4,7 +4,7 @@ import { areaList } from '@vant/area-data';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
     searchResult: [
@@ -37,9 +37,7 @@ const i18n = {
       },
     ],
   },
-};
-
-const t = useTranslate(i18n);
+});
 const searchResult = ref([]);
 
 const onSave = () => Toast(t('save'));
diff --git a/src/address-list/demo/index.vue b/src/address-list/demo/index.vue
index f59a9a726..a641bfcd1 100644
--- a/src/address-list/demo/index.vue
+++ b/src/address-list/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     list: [
       {
@@ -62,9 +62,8 @@ const i18n = {
     disabledText: 'The following address is out of range',
     defaultTagText: 'Default',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const chosenAddressId = ref('1');
 const onAdd = () => {
   Toast(t('add'));
diff --git a/src/area/demo/index.vue b/src/area/demo/index.vue
index 809eb67b7..fa40d6a48 100644
--- a/src/area/demo/index.vue
+++ b/src/area/demo/index.vue
@@ -4,7 +4,7 @@ import { areaList } from '@vant/area-data';
 import { areaListEn } from './area-en';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title2: '选中省市区',
     title3: '配置显示列',
@@ -19,9 +19,8 @@ const i18n = {
     columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
     areaList: areaListEn,
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value = ref('330302');
 </script>
 
diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index dd9ff74ae..0c76277af 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     max: '最大值',
     standalone: '独立展示',
@@ -14,9 +14,7 @@ const i18n = {
     customColor: 'Custom Color',
     customContent: 'Custom Content',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index ead252995..0901f978f 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     type: '按钮类型',
     size: '按钮尺寸',
@@ -60,9 +60,7 @@ const i18n = {
     gradient: 'Gradient',
     blockElement: 'Block Element',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/card/demo/index.vue b/src/card/demo/index.vue
index ec28774f2..4652ccd9e 100644
--- a/src/card/demo/index.vue
+++ b/src/card/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title: '商品名称',
     discountInfo: '营销信息',
@@ -11,9 +11,8 @@ const i18n = {
     discountInfo: 'Discount Info',
     customContent: 'Custom Content',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 </script>
 
diff --git a/src/cascader/demo/index.vue b/src/cascader/demo/index.vue
index 96fa28865..f6b2fa49a 100644
--- a/src/cascader/demo/index.vue
+++ b/src/cascader/demo/index.vue
@@ -6,7 +6,7 @@ import { deepClone } from '../../utils/deep-clone';
 import zhCNOptions from './area-zh-CN';
 import enUSOptions from './area-en-US';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     area: '地区',
     options: zhCNOptions,
@@ -45,7 +45,7 @@ const i18n = {
     ],
     customFieldNames: 'Custom Field Names',
   },
-};
+});
 
 type StateItem = {
   show: boolean;
@@ -54,7 +54,6 @@ type StateItem = {
   options?: CascaderOption[];
 };
 
-const t = useTranslate(i18n);
 const baseState = reactive<StateItem>({
   show: false,
   value: '',
diff --git a/src/cell/demo/index.vue b/src/cell/demo/index.vue
index 7f56960a3..941512fa7 100644
--- a/src/cell/demo/index.vue
+++ b/src/cell/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     cell: '单元格',
     group: '分组',
@@ -32,9 +32,7 @@ const i18n = {
     insetGrouped: 'Inset Grouped',
     verticalCenter: 'Vertical center',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/checkbox/demo/index.vue b/src/checkbox/demo/index.vue
index e13c82b26..2a8302c3d 100644
--- a/src/checkbox/demo/index.vue
+++ b/src/checkbox/demo/index.vue
@@ -5,7 +5,7 @@ import { useRefs } from '../../composables/use-refs';
 import type { CheckboxInstance } from '../types';
 import type { CheckboxGroupInstance } from '../../checkbox-group';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     checkbox: '复选框',
     customIcon: '自定义图标',
@@ -36,9 +36,8 @@ const i18n = {
     horizontal: 'Horizontal',
     disableLabel: 'Disable label click',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const state = reactive({
   checkbox1: true,
   checkbox2: true,
diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue
index a8271c8af..36bacff5a 100644
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     left: '左侧',
     right: '右侧',
@@ -27,9 +27,8 @@ const i18n = {
     startPosition: 'Start Position',
     counterClockwise: 'Counter Clockwise',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const rate = ref(70);
 const currentRate1 = ref(70);
 const currentRate2 = ref(70);
diff --git a/src/col/demo/index.vue b/src/col/demo/index.vue
index b06cf0a79..5b49bd100 100644
--- a/src/col/demo/index.vue
+++ b/src/col/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title2: '在列元素之间增加间距',
     justify: '对齐方式',
@@ -10,9 +10,7 @@ const i18n = {
     title2: 'Column Spacing',
     justify: 'Justify Content',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/collapse/demo/index.vue b/src/collapse/demo/index.vue
index dd07b3cbc..4d542c123 100644
--- a/src/collapse/demo/index.vue
+++ b/src/collapse/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     accordion: '手风琴',
     titleSlot: '自定义标题内容',
@@ -13,9 +13,8 @@ const i18n = {
     titleSlot: 'Custom title',
     text: 'Content',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const active1 = ref([0]);
 const active2 = ref(0);
 const active3 = ref([]);
diff --git a/src/config-provider/demo/index.vue b/src/config-provider/demo/index.vue
index c65dfbc39..885b5e081 100644
--- a/src/config-provider/demo/index.vue
+++ b/src/config-provider/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     rate: '评分',
     slider: '滑块',
@@ -19,9 +19,8 @@ const i18n = {
     customTheme: 'Custom Theme',
     defaultTheme: 'DefaultTheme',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const rate = ref(4);
 const slider = ref(50);
 const themeVars = {
diff --git a/src/contact-card/demo/index.vue b/src/contact-card/demo/index.vue
index 8469fc16e..49104c7ee 100644
--- a/src/contact-card/demo/index.vue
+++ b/src/contact-card/demo/index.vue
@@ -3,7 +3,7 @@ import { computed } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     add: '新增',
     edit: '编辑',
@@ -18,9 +18,7 @@ const i18n = {
     addContact: 'Add Contact',
     editContact: 'Edit Contact',
   },
-};
-
-const t = useTranslate(i18n);
+});
 
 const currentContact = computed(() => ({
   name: t('name'),
diff --git a/src/contact-edit/demo/index.vue b/src/contact-edit/demo/index.vue
index 5e8f536d7..c5335e773 100644
--- a/src/contact-edit/demo/index.vue
+++ b/src/contact-edit/demo/index.vue
@@ -3,16 +3,15 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     defaultLabel: '设为默认联系人',
   },
   'en-US': {
     defaultLabel: 'Set as the default contact',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const editingContact = ref({});
 
 const onSave = () => Toast(t('save'));
diff --git a/src/contact-list/demo/index.vue b/src/contact-list/demo/index.vue
index 88cb28694..aa2c89617 100644
--- a/src/contact-list/demo/index.vue
+++ b/src/contact-list/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     add: '新增',
     edit: '编辑',
@@ -42,9 +42,8 @@ const i18n = {
     select: 'Select',
     defaultTagText: 'default',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const chosenContactId = ref('1');
 
 const onAdd = () => {
diff --git a/src/count-down/demo/index.vue b/src/count-down/demo/index.vue
index d6bc8e9a1..27d406837 100644
--- a/src/count-down/demo/index.vue
+++ b/src/count-down/demo/index.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 import type { CountDownInstance } from '../CountDown';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     reset: '重置',
     pause: '暂停',
@@ -27,9 +27,8 @@ const i18n = {
     manualControl: 'Manual Control',
     formatWithDay: 'DD Day, HH:mm:ss',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const time = ref(30 * 60 * 60 * 1000);
 const countDown = ref<CountDownInstance>();
 
diff --git a/src/coupon-list/demo/index.vue b/src/coupon-list/demo/index.vue
index 1c4597b38..a6eb3c0b2 100644
--- a/src/coupon-list/demo/index.vue
+++ b/src/coupon-list/demo/index.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { CouponInfo } from '../../coupon';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     coupon: {
       name: '优惠券名称',
@@ -21,12 +21,11 @@ const i18n = {
     },
     exchange: 'Success',
   },
-};
+});
 
 const getRandomId = (max = 999999) =>
   String(Math.floor(Math.random() * max) + 1);
 
-const t = useTranslate(i18n);
 const showList = ref(false);
 const chosenCoupon = ref(-1);
 const exchangedCoupons = ref<CouponInfo[]>([]);
diff --git a/src/datetime-picker/demo/index.vue b/src/datetime-picker/demo/index.vue
index 68f6acb4d..5b0946724 100644
--- a/src/datetime-picker/demo/index.vue
+++ b/src/datetime-picker/demo/index.vue
@@ -2,7 +2,7 @@
 import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     day: '日',
     year: '年',
@@ -29,9 +29,8 @@ const i18n = {
     optionFilter: 'Option Filter',
     sortColumns: 'Columns Order',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value = reactive({
   date: new Date(2021, 0, 17),
   time: '12:00',
diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue
index 787660620..b568f0522 100644
--- a/src/dialog/demo/index.vue
+++ b/src/dialog/demo/index.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { Dialog } from '..';
 import type { DialogAction } from '../Dialog';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title: '标题',
     alert1: '提示弹窗',
@@ -24,9 +24,8 @@ const i18n = {
     roundButton: 'Round Button Style',
     componentCall: 'Component Call',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const show = ref(false);
 const image = 'https://img.yzcdn.cn/vant/apple-3.jpg';
 
diff --git a/src/divider/demo/index.vue b/src/divider/demo/index.vue
index ea576651c..2613a7a13 100644
--- a/src/divider/demo/index.vue
+++ b/src/divider/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '文本',
     dashed: '虚线',
@@ -16,9 +16,7 @@ const i18n = {
     contentPosition: 'Content Position',
     customStyle: 'Custom Style',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/dropdown-menu/demo/index.vue b/src/dropdown-menu/demo/index.vue
index 543d320f7..a90c1f3f3 100644
--- a/src/dropdown-menu/demo/index.vue
+++ b/src/dropdown-menu/demo/index.vue
@@ -3,7 +3,7 @@ import { computed, ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import type { DropdownItemInstance } from '../../dropdown-item';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     disableMenu: '禁用菜单',
     switchTitle1: '包邮',
@@ -42,10 +42,9 @@ const i18n = {
       { text: 'Option C', value: 'c' },
     ],
   },
-};
+});
 
 const item = ref<DropdownItemInstance>();
-const t = useTranslate(i18n);
 
 const switch1 = ref(true);
 const switch2 = ref(false);
diff --git a/src/empty/demo/index.vue b/src/empty/demo/index.vue
index 7b0b99937..630f6b486 100644
--- a/src/empty/demo/index.vue
+++ b/src/empty/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     error: '通用错误',
     search: '搜索提示',
@@ -21,9 +21,8 @@ const i18n = {
     customImage: 'Custom Image',
     bottomContent: 'Bottom Content',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const active = ref('error');
 </script>
 
diff --git a/src/field/demo/Autosize.vue b/src/field/demo/Autosize.vue
index abcb40d47..415506148 100644
--- a/src/field/demo/Autosize.vue
+++ b/src/field/demo/Autosize.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     message: '留言',
     autosize: '高度自适应',
@@ -13,9 +13,8 @@ const i18n = {
     autosize: 'Auto Resize',
     placeholder: 'Message',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value = ref('');
 </script>
 
diff --git a/src/field/demo/BasicUsage.vue b/src/field/demo/BasicUsage.vue
index 6d902f7ac..1c9c42b19 100644
--- a/src/field/demo/BasicUsage.vue
+++ b/src/field/demo/BasicUsage.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     label: '文本',
     placeholder: '请输入文本',
@@ -11,9 +11,8 @@ const i18n = {
     label: 'Label',
     placeholder: 'Text',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value = ref('');
 </script>
 
diff --git a/src/field/demo/CustomType.vue b/src/field/demo/CustomType.vue
index c64f62a77..becc209fa 100644
--- a/src/field/demo/CustomType.vue
+++ b/src/field/demo/CustomType.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '文本',
     digit: '整数',
@@ -27,9 +27,8 @@ const i18n = {
     phonePlaceholder: 'Phone',
     numberPlaceholder: 'Number',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const text = ref('');
 const phone = ref('');
 const digit = ref('');
diff --git a/src/field/demo/Disabled.vue b/src/field/demo/Disabled.vue
index 19669763e..03fda5b51 100644
--- a/src/field/demo/Disabled.vue
+++ b/src/field/demo/Disabled.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '文本',
     disabled: '禁用输入框',
@@ -13,9 +13,7 @@ const i18n = {
     inputReadonly: 'Input Readonly',
     inputDisabled: 'Input Disabled',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/field/demo/ErrorInfo.vue b/src/field/demo/ErrorInfo.vue
index 4e3c5bd2e..66c5f5190 100644
--- a/src/field/demo/ErrorInfo.vue
+++ b/src/field/demo/ErrorInfo.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     phone: '手机号',
     errorInfo: '错误提示',
@@ -15,9 +15,8 @@ const i18n = {
     phoneError: 'Invalid phone',
     phonePlaceholder: 'Phone',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const phone = ref('123');
 const username = ref('');
 </script>
diff --git a/src/field/demo/FormatValue.vue b/src/field/demo/FormatValue.vue
index 1a2017649..2609d39b4 100644
--- a/src/field/demo/FormatValue.vue
+++ b/src/field/demo/FormatValue.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '文本',
     formatValue: '格式化输入内容',
@@ -15,9 +15,8 @@ const i18n = {
     formatOnBlur: 'Format On Blur',
     formatOnChange: 'Format On Change',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value1 = ref('');
 const value2 = ref('');
 const formatter = (value: string) => value.replace(/\d/g, '');
diff --git a/src/field/demo/InputAlign.vue b/src/field/demo/InputAlign.vue
index a1b23e708..f6611421f 100644
--- a/src/field/demo/InputAlign.vue
+++ b/src/field/demo/InputAlign.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '文本',
     inputAlign: '输入框内容对齐',
@@ -13,9 +13,8 @@ const i18n = {
     inputAlign: 'Input Align',
     alignPlaceHolder: 'Input Align Right',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value = ref('');
 </script>
 
diff --git a/src/field/demo/InsertButton.vue b/src/field/demo/InsertButton.vue
index 7b620365b..e38b0caf7 100644
--- a/src/field/demo/InsertButton.vue
+++ b/src/field/demo/InsertButton.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     sms: '短信验证码',
     sendSMS: '发送验证码',
@@ -15,9 +15,8 @@ const i18n = {
     insertButton: 'Insert Button',
     smsPlaceholder: 'SMS',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const sms = ref('');
 </script>
 
diff --git a/src/field/demo/ShowIcon.vue b/src/field/demo/ShowIcon.vue
index d45787533..aab62a39c 100644
--- a/src/field/demo/ShowIcon.vue
+++ b/src/field/demo/ShowIcon.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '文本',
     showIcon: '显示图标',
@@ -13,9 +13,8 @@ const i18n = {
     showIcon: 'Show Icon',
     showClearIcon: 'Show Clear Icon',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const icon1 = ref('');
 const icon2 = ref('123');
 </script>
diff --git a/src/field/demo/ShowWordLimit.vue b/src/field/demo/ShowWordLimit.vue
index 69727d42f..234fc001f 100644
--- a/src/field/demo/ShowWordLimit.vue
+++ b/src/field/demo/ShowWordLimit.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     message: '留言',
     placeholder: '请输入留言',
@@ -13,9 +13,8 @@ const i18n = {
     placeholder: 'Message',
     showWordLimit: 'Show Word Limit',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value = ref('');
 </script>
 
diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue
index dcbe74ed4..344a8f13b 100644
--- a/src/form/demo/BasicUsage.vue
+++ b/src/form/demo/BasicUsage.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { FieldValidateError } from '../../field/types';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     submit: '提交',
     username: '用户名',
@@ -18,9 +18,8 @@ const i18n = {
     requireUsername: 'Username is required',
     requirePassword: 'Password is required',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const username = ref('');
 const password = ref('');
 
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index f84ad26a4..f6866c842 100644
--- a/src/form/demo/FieldType.vue
+++ b/src/form/demo/FieldType.vue
@@ -6,7 +6,7 @@ import FieldTypePicker from './FieldTypePicker.vue';
 import FieldTypeCalendar from './FieldTypeCalendar.vue';
 import FieldTypeDatetimePicker from './FieldTypeDatetimePicker.vue';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     rate: '评分',
     radio: '单选框',
@@ -35,9 +35,8 @@ const i18n = {
     checkboxGroup: 'Checkbox Group',
     requireCheckbox: 'Checkbox is required',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const rate = ref(3);
 const radio = ref('1');
 const slider = ref(50);
diff --git a/src/form/demo/FieldTypeArea.vue b/src/form/demo/FieldTypeArea.vue
index 7881fcf7d..af6e351f1 100644
--- a/src/form/demo/FieldTypeArea.vue
+++ b/src/form/demo/FieldTypeArea.vue
@@ -5,7 +5,7 @@ import { useTranslate } from '@demo/use-translate';
 import { AreaColumnOption } from '../../area';
 import { areaListEn } from '../../area/demo/area-en';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     picker: '地区选择',
     areaList,
@@ -16,9 +16,8 @@ const i18n = {
     areaList: areaListEn,
     placeholder: 'Select area',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const areaCode = ref('');
 const showArea = ref(false);
 
diff --git a/src/form/demo/FieldTypeCalendar.vue b/src/form/demo/FieldTypeCalendar.vue
index 6a04e2f45..698325fc4 100644
--- a/src/form/demo/FieldTypeCalendar.vue
+++ b/src/form/demo/FieldTypeCalendar.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     calendar: '日历',
     placeholder: '点击选择日期',
@@ -11,9 +11,8 @@ const i18n = {
     calendar: 'Calendar',
     placeholder: 'Select date',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const result = ref('');
 const showCalendar = ref(false);
 
diff --git a/src/form/demo/FieldTypeDatetimePicker.vue b/src/form/demo/FieldTypeDatetimePicker.vue
index 7e4aef797..a155dd3a2 100644
--- a/src/form/demo/FieldTypeDatetimePicker.vue
+++ b/src/form/demo/FieldTypeDatetimePicker.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     label: '时间选择',
     placeholder: '点击选择时间',
@@ -11,9 +11,8 @@ const i18n = {
     label: 'Datetime Picker',
     placeholder: 'Select time',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const result = ref('');
 const showPicker = ref(false);
 
diff --git a/src/form/demo/FieldTypePicker.vue b/src/form/demo/FieldTypePicker.vue
index 0298665ad..5c32b1560 100644
--- a/src/form/demo/FieldTypePicker.vue
+++ b/src/form/demo/FieldTypePicker.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     picker: '选择器',
     placeholder: '点击选择城市',
@@ -13,9 +13,8 @@ const i18n = {
     placeholder: 'Select city',
     textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
   },
-};
+});
 
-const t = useTranslate(i18n);
 const result = ref('');
 const showPicker = ref(false);
 
diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue
index 27ca6bc10..1872cef7d 100644
--- a/src/form/demo/ValidateRules.vue
+++ b/src/form/demo/ValidateRules.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { FieldValidateError } from '../../field/types';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     label: '文本',
     title: '校验规则',
@@ -29,9 +29,8 @@ const i18n = {
     asyncValidator: 'Use async validator',
     validatorMessage: 'Use validator to return message',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value1 = ref('');
 const value2 = ref('');
 const value3 = ref('abc');
diff --git a/src/grid/demo/index.vue b/src/grid/demo/index.vue
index b89fb66d0..48dc69c41 100644
--- a/src/grid/demo/index.vue
+++ b/src/grid/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '文字',
     route: '页面导航',
@@ -26,9 +26,7 @@ const i18n = {
     showBadge: 'Show Badge',
     horizontal: 'Horizontal',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index a86a6f1ed..966c1d3ae 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -31,7 +31,7 @@ function copyToClipboard(str: string) {
   }
 }
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title: '图标列表',
     badge: '徽标提示',
@@ -54,9 +54,8 @@ const i18n = {
     color: 'Icon Color',
     size: 'Icon Size',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const tab = ref(0);
 const demoIcon = 'chat-o';
 const demoImage = 'https://b.yzcdn.cn/vant/icon-demo-1126.png';
diff --git a/src/image-preview/demo/index.vue b/src/image-preview/demo/index.vue
index dfd41f210..a75357381 100644
--- a/src/image-preview/demo/index.vue
+++ b/src/image-preview/demo/index.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { ImagePreview, ImagePreviewOptions } from '..';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     closed: '关闭',
     showClose: '展示关闭按钮',
@@ -27,7 +27,7 @@ const i18n = {
     componentCall: 'Component Call',
     index: (index: number) => `Page: ${index}`,
   },
-};
+});
 
 const images = [
   'https://img.yzcdn.cn/vant/apple-1.jpg',
@@ -36,7 +36,6 @@ const images = [
   'https://img.yzcdn.cn/vant/apple-4.jpg',
 ];
 
-const t = useTranslate(i18n);
 const show = ref(false);
 const index = ref(0);
 
diff --git a/src/image/demo/index.vue b/src/image/demo/index.vue
index b4d71235e..4f7d3ccb0 100644
--- a/src/image/demo/index.vue
+++ b/src/image/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     fitMode: '填充模式',
     round: '圆形图片',
@@ -20,9 +20,8 @@ const i18n = {
     customTip: 'Custom Tip',
     loadFail: 'Load failed',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const image = 'https://img.yzcdn.cn/vant/cat.jpeg';
 const fits = ['contain', 'cover', 'fill', 'none', 'scale-down'];
 </script>
diff --git a/src/index-bar/demo/index.vue b/src/index-bar/demo/index.vue
index 1ee44a379..97a1280ef 100644
--- a/src/index-bar/demo/index.vue
+++ b/src/index-bar/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '文本',
     customIndexList: '自定义索引列表',
@@ -11,9 +11,8 @@ const i18n = {
     text: 'Text',
     customIndexList: 'Custom Index List',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const activeTab = ref(0);
 const indexList: string[] = [];
 const customIndexList = [1, 2, 3, 4, 5, 6, 8, 9, 10];
diff --git a/src/lazyload/demo/index.vue b/src/lazyload/demo/index.vue
index 0bed30145..eafab853c 100644
--- a/src/lazyload/demo/index.vue
+++ b/src/lazyload/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title2: '背景图懒加载',
     title3: '懒加载模块',
@@ -10,9 +10,7 @@ const i18n = {
     title2: 'Lazyload Background Image',
     title3: 'Lazyload Component',
   },
-};
-
-const t = useTranslate(i18n);
+});
 
 const imageList = [
   'https://img.yzcdn.cn/vant/apple-1.jpg',
diff --git a/src/list/demo/index.vue b/src/list/demo/index.vue
index 7f747492d..e34fe514c 100644
--- a/src/list/demo/index.vue
+++ b/src/list/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     errorInfo: '错误提示',
     errorText: '请求失败，点击重新加载',
@@ -15,9 +15,8 @@ const i18n = {
     pullRefresh: 'PullRefresh',
     finishedText: 'Finished',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const list = ref([
   {
     items: [] as string[],
diff --git a/src/loading/demo/index.vue b/src/loading/demo/index.vue
index 2ceadf147..1638ba4e1 100644
--- a/src/loading/demo/index.vue
+++ b/src/loading/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     type: '加载类型',
     text: '加载文案',
@@ -18,9 +18,7 @@ const i18n = {
     vertical: 'Vertical',
     textColor: 'Text Color',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/nav-bar/demo/index.vue b/src/nav-bar/demo/index.vue
index 7831c696f..b0b16364f 100644
--- a/src/nav-bar/demo/index.vue
+++ b/src/nav-bar/demo/index.vue
@@ -2,16 +2,15 @@
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     useSlot: '使用插槽',
   },
   'en-US': {
     useSlot: 'Use Slot',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const onClickLeft = () => Toast(t('back'));
 const onClickRight = () => Toast(t('button'));
 </script>
diff --git a/src/notice-bar/demo/index.vue b/src/notice-bar/demo/index.vue
index 89d57d0e7..6904b55d4 100644
--- a/src/notice-bar/demo/index.vue
+++ b/src/notice-bar/demo/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
     mode: '通知栏模式',
@@ -22,9 +22,7 @@ const i18n = {
     scrollable: 'Scrollable',
     verticalScroll: 'Vertical Scroll',
   },
-};
-
-const t = useTranslate(i18n);
+});
 </script>
 
 <template>
diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue
index 25020bce0..f84689e7f 100644
--- a/src/notify/demo/index.vue
+++ b/src/notify/demo/index.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { Notify } from '..';
 import { NotifyType } from '../Notify';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     primary: '主要通知',
     success: '成功通知',
@@ -29,9 +29,8 @@ const i18n = {
     componentCall: 'Component Call',
     customDuration: 'Custom Duration',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const show = ref(false);
 
 const showNotify = () => {
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index 43dc15548..07275832c 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     close: '完成',
     input: '输入',
@@ -36,9 +36,8 @@ const i18n = {
     multiExtraKey: 'Multiple ExtraKey',
     randomKeyOrder: 'Random Key Order',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value = ref('');
 const keyboard = ref('default');
 
diff --git a/src/overlay/demo/index.vue b/src/overlay/demo/index.vue
index ee06719a5..6d26e4187 100644
--- a/src/overlay/demo/index.vue
+++ b/src/overlay/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     showOverlay: '显示遮罩层',
     embeddedContent: '嵌入内容',
@@ -11,9 +11,8 @@ const i18n = {
     showOverlay: 'Show Overlay',
     embeddedContent: 'Embedded Content',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const show = ref(false);
 const showEmbedded = ref(false);
 </script>
diff --git a/src/pagination/demo/index.vue b/src/pagination/demo/index.vue
index 7a161175c..090b74cea 100644
--- a/src/pagination/demo/index.vue
+++ b/src/pagination/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title2: '简单模式',
     title3: '显示省略号',
@@ -17,9 +17,8 @@ const i18n = {
     prevText: 'Prev',
     nextText: 'Next',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const currentPage1 = ref(1);
 const currentPage2 = ref(1);
 const currentPage3 = ref(1);
diff --git a/src/password-input/demo/index.vue b/src/password-input/demo/index.vue
index 0478c7f0c..1cb45f33f 100644
--- a/src/password-input/demo/index.vue
+++ b/src/password-input/demo/index.vue
@@ -3,7 +3,7 @@ import { ref, watch } from 'vue';
 import { ComponentInstance } from '../../utils';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     info: '密码为 6 位数字',
     showInfo: '提示信息',
@@ -20,9 +20,8 @@ const i18n = {
     removeMask: 'Remove Mask',
     customLength: 'Custom Length',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const initialValue = {
   showInfo: '123',
   addGutter: '123',
diff --git a/src/picker/demo/index.vue b/src/picker/demo/index.vue
index 974cfd1c3..a85ca954f 100644
--- a/src/picker/demo/index.vue
+++ b/src/picker/demo/index.vue
@@ -4,7 +4,7 @@ import { dateColumns, cascadeColumns, cascadeColumnsCustomKey } from './data';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     city: '城市',
     cascade: '级联选择',
@@ -68,9 +68,8 @@ const i18n = {
     toastContent: (value: string, index: number) =>
       `Value: ${value}, Index：${index}`,
   },
-};
+});
 
-const t = useTranslate(i18n);
 const picker = ref();
 const showPicker = ref(false);
 const fieldValue = ref('');
diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue
index 46ee53cc3..ee58fe4c5 100644
--- a/src/popover/demo/index.vue
+++ b/src/popover/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
     shortActions: [{ text: '选项一' }, { text: '选项二' }],
@@ -50,7 +50,7 @@ const i18n = {
     disableAction: 'Disable Action',
     choosePlacement: 'Placement',
   },
-};
+});
 
 const placements = [
   'top',
@@ -67,7 +67,6 @@ const placements = [
   'bottom-end',
 ];
 
-const t = useTranslate(i18n);
 const show = ref({
   showIcon: false,
   placement: false,
diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue
index ac85ead05..90812ad02 100644
--- a/src/popup/demo/index.vue
+++ b/src/popup/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     position: '弹出位置',
     buttonBasic: '展示弹出层',
@@ -29,9 +29,8 @@ const i18n = {
     customCloseIcon: 'Custom Icon',
     customIconPosition: 'Icon Position',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const showBasic = ref(false);
 const showTop = ref(false);
 const showBottom = ref(false);
diff --git a/src/progress/demo/index.vue b/src/progress/demo/index.vue
index caa4dbab7..76b3a42f9 100644
--- a/src/progress/demo/index.vue
+++ b/src/progress/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title2: '置灰',
     title3: '样式定制',
@@ -15,9 +15,7 @@ const i18n = {
     strokeWidth: 'Stroke Width',
     transition: 'Transition',
   },
-};
-
-const t = useTranslate(i18n);
+});
 
 const percentage = ref(50);
 
diff --git a/src/pull-refresh/demo/index.vue b/src/pull-refresh/demo/index.vue
index 2df13f5c5..78a904c90 100644
--- a/src/pull-refresh/demo/index.vue
+++ b/src/pull-refresh/demo/index.vue
@@ -3,7 +3,7 @@ import { computed, onMounted, ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     try: '下拉试试',
     text: '刷新次数',
@@ -18,9 +18,8 @@ const i18n = {
     successTip: 'Success Tip',
     customTips: 'Custom Tips',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const count = ref(0);
 const loading = ref(false);
 
diff --git a/src/radio/demo/index.vue b/src/radio/demo/index.vue
index f28b4c781..6813814d7 100644
--- a/src/radio/demo/index.vue
+++ b/src/radio/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     radio: '单选框',
     text1: '未选中禁用',
@@ -27,9 +27,8 @@ const i18n = {
     customIconSize: 'Custom Icon Size',
     disableLabel: 'Disable label click',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const radio1 = ref('1');
 const radio2 = ref('2');
 const radio3 = ref('1');
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index 69f1d0845..06c042edf 100644
--- a/src/rate/demo/index.vue
+++ b/src/rate/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     halfStar: '半星',
     disabled: '禁用状态',
@@ -26,9 +26,8 @@ const i18n = {
     changeEvent: 'Change Event',
     toastContent: (value: number) => `current value：${value}`,
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value1 = ref(3);
 const value2 = ref(3);
 const value3 = ref(3);
diff --git a/src/search/demo/index.vue b/src/search/demo/index.vue
index 3d3c3bebd..c31c8e139 100644
--- a/src/search/demo/index.vue
+++ b/src/search/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     label: '地址',
     disabled: '禁用搜索框',
@@ -22,9 +22,8 @@ const i18n = {
     customButton: 'Custom Action Button',
     listenToEvents: 'Listen to Events',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value1 = ref('');
 const value2 = ref('');
 const value3 = ref('');
diff --git a/src/share-sheet/demo/index.vue b/src/share-sheet/demo/index.vue
index a7ee87093..4cbaa406c 100644
--- a/src/share-sheet/demo/index.vue
+++ b/src/share-sheet/demo/index.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { ShareSheetOption, ShareSheetOptions } from '..';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     qq: 'QQ',
     name: '名称',
@@ -39,9 +39,8 @@ const i18n = {
     weappQrcode: 'Weapp Qrcode',
     wechatMoments: 'Wechat Moments',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const showBasic = ref(false);
 const showWithDesc = ref(false);
 const showMultiLine = ref(false);
diff --git a/src/sidebar/demo/index.vue b/src/sidebar/demo/index.vue
index 15f41e224..cfa327b28 100644
--- a/src/sidebar/demo/index.vue
+++ b/src/sidebar/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title: '标签名',
     disabled: '禁用选项',
@@ -15,9 +15,8 @@ const i18n = {
     showBadge: 'Show Badge',
     changeEvent: 'Change Event',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const active1 = ref(0);
 const active2 = ref(0);
 const active3 = ref(0);
diff --git a/src/skeleton/demo/index.vue b/src/skeleton/demo/index.vue
index 388eb8044..27c70d4e1 100644
--- a/src/skeleton/demo/index.vue
+++ b/src/skeleton/demo/index.vue
@@ -2,13 +2,12 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     showAvatar: '显示头像',
     showChildren: '显示子组件',
     title: '关于 Vant',
-    desc:
-      'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
+    desc: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
   },
   'en-US': {
     showAvatar: 'Show Avatar',
@@ -16,9 +15,8 @@ const i18n = {
     title: 'About Vant',
     desc: 'Vant is a set of Mobile UI Components built on Vue.',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const show = ref(false);
 </script>
 
diff --git a/src/slider/demo/index.vue b/src/slider/demo/index.vue
index cbe86b933..e5d31dfcb 100644
--- a/src/slider/demo/index.vue
+++ b/src/slider/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     text: '当前值：',
     title1: '基础用法',
@@ -26,9 +26,8 @@ const i18n = {
     customStyle: 'Custom Style',
     customButton: 'Custom Button',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const value1 = ref(50);
 const value2 = ref([20, 60]);
 const value3 = ref(0);
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index 6a768753f..85ab75e30 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     step: '步长设置',
     range: '限制输入范围',
@@ -24,9 +24,8 @@ const i18n = {
     disableInput: 'Disable Input',
     decimalLength: 'Decimal Length',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const stepper1 = ref(1);
 const stepper2 = ref(1);
 const stepper3 = ref(1);
diff --git a/src/steps/demo/index.vue b/src/steps/demo/index.vue
index 10cf87315..9e7fe2ad9 100644
--- a/src/steps/demo/index.vue
+++ b/src/steps/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     nextStep: '下一步',
     step1: '买家下单',
@@ -29,9 +29,8 @@ const i18n = {
     status3: '【City】Status3',
     customStyle: 'Custom Style',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const active = ref(1);
 
 const nextStep = () => {
diff --git a/src/sticky/demo/index.vue b/src/sticky/demo/index.vue
index 16a0534f8..e534e4850 100644
--- a/src/sticky/demo/index.vue
+++ b/src/sticky/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     offsetTop: '吸顶距离',
     offsetBottom: '吸底距离',
@@ -13,9 +13,8 @@ const i18n = {
     offsetBottom: 'Offset Bottom',
     setContainer: 'Set Container',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const container = ref(null);
 </script>
 
diff --git a/src/style/demo/index.vue b/src/style/demo/index.vue
index 43b547267..eb015567b 100644
--- a/src/style/demo/index.vue
+++ b/src/style/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     hairline: '1px 边框',
     ellipsis: '文字省略',
@@ -22,9 +22,8 @@ const i18n = {
     text2:
       'This is a paragraph that displays up to two lines of text, and the rest of the text will be omitted.',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const show = ref(false);
 const transitionName = ref('');
 
diff --git a/src/submit-bar/demo/index.vue b/src/submit-bar/demo/index.vue
index ed4352d2f..09079f7bc 100644
--- a/src/submit-bar/demo/index.vue
+++ b/src/submit-bar/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     tip1: '你的收货地址不支持同城送, 我们已为你推荐快递',
     tip2: '你的收货地址不支持同城送, ',
@@ -22,9 +22,8 @@ const i18n = {
     clickLink: 'Click Link',
     clickButton: 'Submit',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const checked = ref(true);
 
 const onSubmit = () => Toast(t('clickButton'));
diff --git a/src/swipe-cell/demo/index.vue b/src/swipe-cell/demo/index.vue
index 302762ecc..f80df058c 100644
--- a/src/swipe-cell/demo/index.vue
+++ b/src/swipe-cell/demo/index.vue
@@ -2,7 +2,7 @@
 import { useTranslate } from '@demo/use-translate';
 import { Dialog } from '../../dialog';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     select: '选择',
     delete: '删除',
@@ -23,9 +23,8 @@ const i18n = {
     beforeClose: 'Before Close',
     customContent: 'Custom Content',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 
 const beforeClose = ({ position }: { position: string }) => {
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index a46f75e02..8e10df1ce 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -2,7 +2,7 @@
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title2: '懒加载',
     title3: '监听 change 事件',
@@ -19,9 +19,8 @@ const i18n = {
     title6: 'Custom indicator',
     message: 'Current Swipe index:',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const images = [
   'https://img.yzcdn.cn/vant/apple-1.jpg',
   'https://img.yzcdn.cn/vant/apple-2.jpg',
diff --git a/src/switch/demo/index.vue b/src/switch/demo/index.vue
index ba344a400..ee19d9bb7 100644
--- a/src/switch/demo/index.vue
+++ b/src/switch/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Dialog } from '../../dialog';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     title: '标题',
     confirm: '提醒',
@@ -22,9 +22,8 @@ const i18n = {
     customColor: 'Custom Color',
     asyncControl: 'Async Control',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const checked = ref(true);
 const checked2 = ref(true);
 const checked3 = ref(true);
diff --git a/src/tab/demo/index.vue b/src/tab/demo/index.vue
index 8f9febcff..505738c77 100644
--- a/src/tab/demo/index.vue
+++ b/src/tab/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     tab: '标签 ',
     title2: '标签栏滚动',
@@ -35,9 +35,8 @@ const i18n = {
     matchByName: 'Match By Name',
     beforeChange: 'Before Change',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const active = ref(2);
 const activeName = ref('b');
 
diff --git a/src/tabbar/demo/index.vue b/src/tabbar/demo/index.vue
index 78f4ee161..469715404 100644
--- a/src/tabbar/demo/index.vue
+++ b/src/tabbar/demo/index.vue
@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     badge: '徽标提示',
     customIcon: '自定义图标',
@@ -18,9 +18,8 @@ const i18n = {
     matchByName: 'Match by name',
     switchEvent: 'Change Event',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const active = ref(0);
 const active2 = ref(0);
 const active3 = ref(0);
diff --git a/src/tag/demo/index.vue b/src/tag/demo/index.vue
index 862ea4e30..f04d286e8 100644
--- a/src/tag/demo/index.vue
+++ b/src/tag/demo/index.vue
@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     type: '类型',
     mark: '标记样式',
@@ -34,9 +34,8 @@ const i18n = {
     customTextColor: 'Text Color',
     customPlainColor: 'Plain Color',
   },
-};
+});
 
-const t = useTranslate(i18n);
 const show = ref(true);
 const close = () => {
   show.value = false;
diff --git a/src/toast/demo/index.vue b/src/toast/demo/index.vue
index 49a48d9f1..8a268763f 100644
--- a/src/toast/demo/index.vue
+++ b/src/toast/demo/index.vue
@@ -3,7 +3,7 @@ import { useTranslate } from '@demo/use-translate';
 import { Toast } from '..';
 import type { LoadingType } from '../../loading';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     fail: '失败提示',
     text: '提示内容',
@@ -40,9 +40,7 @@ const i18n = {
     positionBottom: 'Bottom',
     customPosition: 'Custom Position',
   },
-};
-
-const t = useTranslate(i18n);
+});
 
 const showLoadingToast = (loadingType?: LoadingType) => {
   Toast.loading({
diff --git a/src/tree-select/demo/index.vue b/src/tree-select/demo/index.vue
index 94783fbe9..1e0caa95c 100644
--- a/src/tree-select/demo/index.vue
+++ b/src/tree-select/demo/index.vue
@@ -5,7 +5,7 @@ import { zhCNData } from './data-zh';
 import { enUSData } from './data-en';
 import { deepClone } from '../../utils/deep-clone';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     showBadge: '徽标提示',
     radioMode: '单选模式',
@@ -22,9 +22,8 @@ const i18n = {
     data: enUSData,
     dataSimple: [{ text: 'Group 1' }, { text: 'Group 2' }],
   },
-};
+});
 
-const t = useTranslate(i18n);
 const activeId = ref(1);
 const activeId2 = ref(1);
 const activeIds = ref([1, 2]);
diff --git a/src/uploader/demo/index.vue b/src/uploader/demo/index.vue
index ad37ee3d5..9376bb9bc 100644
--- a/src/uploader/demo/index.vue
+++ b/src/uploader/demo/index.vue
@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { UploaderFileListItem } from '../types';
 import { Toast } from '../../toast';
 
-const i18n = {
+const t = useTranslate({
   'zh-CN': {
     status: '上传状态',
     failed: '上传失败',
@@ -41,9 +41,7 @@ const i18n = {
     customPreviewImage: 'Custom single prevew image',
     deleteMessage: 'Before Delete',
   },
-};
-
-const t = useTranslate(i18n);
+});
 
 const fileList = ref([
   { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },