src/action-bar/demo/index.vue

@@ -2,7 +2,7 @@
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     icon1: '客服',
     icon2: '购物车',
@@ -29,7 +29,9 @@ const t = useTranslate({
     customIconColor: 'Custom Icon Color',
     customButtonColor: 'Custom Button Color',
   },
-});
+};
+
+const t = useTranslate(i18n);
 const onClickIcon = () => Toast(t('clickIcon'));
 const onClickButton = () => Toast(t('clickButton'));
 </script>

src/action-sheet/demo/index.vue

@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { ActionSheetAction } from '..';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     option1: '选项一',
     option2: '选项二',
@@ -33,7 +33,9 @@ const t = useTranslate({
     disabledOption: 'Disabled Option',
     showDescription: 'Show Description',
   },
-});
+};
+
+const t = useTranslate(i18n);
 const showBasic = ref(false);
 const showCancel = ref(false);
 const showTitle = ref(false);

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     areaColumnsPlaceholder: ['请选择', '请选择', '请选择'],
     searchResult: [
@@ -37,7 +37,9 @@ const t = useTranslate({
       },
     ],
   },
-});
+};
+
+const t = useTranslate(i18n);
 const searchResult = ref([]);
 
 const onSave = () => Toast(t('save'));

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     list: [
       {
@@ -62,8 +62,9 @@ const t = useTranslate({
     disabledText: 'The following address is out of range',
     defaultTagText: 'Default',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const chosenAddressId = ref('1');
 const onAdd = () => {
   Toast(t('add'));

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     title2: '选中省市区',
     title3: '配置显示列',
@@ -19,8 +19,9 @@ const t = useTranslate({
     columnsPlaceholder: ['Choose', 'Choose', 'Choose'],
     areaList: areaListEn,
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value = ref('330302');
 </script>
 

src/badge/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     max: '最大值',
     standalone: '独立展示',
@@ -14,7 +14,9 @@ const t = useTranslate({
     customColor: 'Custom Color',
     customContent: 'Custom Content',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

src/button/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     type: '按钮类型',
     size: '按钮尺寸',
@@ -60,7 +60,9 @@ const t = useTranslate({
     gradient: 'Gradient',
     blockElement: 'Block Element',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

src/calendar/demo/TiledDisplay.vue

@@ -1,31 +0,0 @@
-<script setup>
-import { useTranslate } from '@demo/use-translate';
-
-const minDate = new Date(2012, 0, 10);
-const maxDate = new Date(2012, 2, 20);
-
-const t = useTranslate({
-  'zh-CN': {
-    calendar: '日历',
-    tiledDisplay: '平铺展示',
-  },
-  'en-US': {
-    calendar: 'Calendar',
-    tiledDisplay: 'Tiled display',
-  },
-});
-</script>
-
-<template>
-  <demo-block card :title="t('tiledDisplay')">
-    <van-calendar
-      :title="t('calendar')"
-      :poppable="false"
-      :show-confirm="false"
-      :min-date="minDate"
-      :max-date="maxDate"
-      :default-date="minDate"
-      :style="{ height: '500px' }"
-    />
-  </demo-block>
-</template>

src/calendar/demo/index.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
-import TiledDisplay from './TiledDisplay.vue';
 import type { CalendarDayItem } from '../types';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     in: '入店',
     out: '离店',
     today: '今天',
     laborDay: '劳动节',
     youthDay: '青年节',
+    calendar: '日历',
     maxRange: '日期区间最大范围',
     selectCount: (count: number) => `选择了 ${count} 个日期`,
     selectSingle: '选择单个日期',
@@ -26,6 +26,7 @@ const t = useTranslate({
     customCalendar: '自定义日历',
     confirmDisabledText: '请选择结束时间',
     firstDayOfWeek: '自定义周起始日',
+    tiledDisplay: '平铺展示',
   },
   'en-US': {
     in: 'In',
@@ -33,6 +34,7 @@ const t = useTranslate({
     today: 'Today',
     laborDay: 'Labor day',
     youthDay: 'Youth Day',
+    calendar: 'Calendar',
     maxRange: 'Max Range',
     selectCount: (count: number) => `${count} dates selected`,
     selectSingle: 'Select Single Date',
@@ -48,8 +50,11 @@ const t = useTranslate({
     customCalendar: 'Custom Calendar',
     firstDayOfWeek: 'Custom First Day Of Week',
     confirmDisabledText: 'Select End Time',
+    tiledDisplay: 'Tiled display',
   },
-});
+};
+
+const t = useTranslate(i18n);
 const state = reactive<Record<string, any>>({
   date: {
     maxRange: [],
@@ -74,6 +79,8 @@ const state = reactive<Record<string, any>>({
   formatter: undefined,
   showConfirm: false,
   showCalendar: false,
+  tiledMinDate: new Date(2012, 0, 10),
+  tiledMaxDate: new Date(2012, 2, 20),
   confirmText: undefined,
   confirmDisabledText: undefined,
   firstDayOfWeek: 0,
@@ -281,7 +288,17 @@ const onConfirm = (date: Date | Date[]) => {
     />
   </demo-block>
 
-  <TiledDisplay />
+  <demo-block card :title="t('tiledDisplay')">
+    <van-calendar
+      :title="t('calendar')"
+      :poppable="false"
+      :show-confirm="false"
+      :min-date="state.tiledMinDate"
+      :max-date="state.tiledMaxDate"
+      :default-date="state.tiledMinDate"
+      :style="{ height: '500px' }"
+    />
+  </demo-block>
 
   <van-calendar
     v-model:show="state.showCalendar"

src/card/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title: '商品名称',
     discountInfo: '营销信息',
@@ -11,8 +11,9 @@ const t = useTranslate({
     discountInfo: 'Discount Info',
     customContent: 'Custom Content',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 </script>
 

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     area: '地区',
     options: zhCNOptions,
@@ -45,7 +45,7 @@ const t = useTranslate({
     ],
     customFieldNames: 'Custom Field Names',
   },
-});
+};
 
 type StateItem = {
   show: boolean;
@@ -54,6 +54,7 @@ type StateItem = {
   options?: CascaderOption[];
 };
 
+const t = useTranslate(i18n);
 const baseState = reactive<StateItem>({
   show: false,
   value: '',

src/cell/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     cell: '单元格',
     group: '分组',
@@ -32,7 +32,9 @@ const t = useTranslate({
     insetGrouped: 'Inset Grouped',
     verticalCenter: 'Vertical center',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     checkbox: '复选框',
     customIcon: '自定义图标',
@@ -36,8 +36,9 @@ const t = useTranslate({
     horizontal: 'Horizontal',
     disableLabel: 'Disable label click',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const state = reactive({
   checkbox1: true,
   checkbox2: true,

src/circle/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     left: '左侧',
     right: '右侧',
@@ -27,8 +27,9 @@ const t = useTranslate({
     startPosition: 'Start Position',
     counterClockwise: 'Counter Clockwise',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const rate = ref(70);
 const currentRate1 = ref(70);
 const currentRate2 = ref(70);

src/col/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title2: '在列元素之间增加间距',
     justify: '对齐方式',
@@ -10,7 +10,9 @@ const t = useTranslate({
     title2: 'Column Spacing',
     justify: 'Justify Content',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

src/collapse/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     accordion: '手风琴',
     titleSlot: '自定义标题内容',
@@ -13,8 +13,9 @@ const t = useTranslate({
     titleSlot: 'Custom title',
     text: 'Content',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const active1 = ref([0]);
 const active2 = ref(0);
 const active3 = ref([]);

src/config-provider/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     rate: '评分',
     slider: '滑块',
@@ -19,8 +19,9 @@ const t = useTranslate({
     customTheme: 'Custom Theme',
     defaultTheme: 'DefaultTheme',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const rate = ref(4);
 const slider = ref(50);
 const themeVars = {

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     add: '新增',
     edit: '编辑',
@@ -18,7 +18,9 @@ const t = useTranslate({
     addContact: 'Add Contact',
     editContact: 'Edit Contact',
   },
-});
+};
+
+const t = useTranslate(i18n);
 
 const currentContact = computed(() => ({
   name: t('name'),

src/contact-edit/demo/index.vue

@@ -3,15 +3,16 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     defaultLabel: '设为默认联系人',
   },
   'en-US': {
     defaultLabel: 'Set as the default contact',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const editingContact = ref({});
 
 const onSave = () => Toast(t('save'));

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     add: '新增',
     edit: '编辑',
@@ -42,8 +42,9 @@ const t = useTranslate({
     select: 'Select',
     defaultTagText: 'default',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const chosenContactId = ref('1');
 
 const onAdd = () => {

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     reset: '重置',
     pause: '暂停',
@@ -27,8 +27,9 @@ const t = useTranslate({
     manualControl: 'Manual Control',
     formatWithDay: 'DD Day, HH:mm:ss',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const time = ref(30 * 60 * 60 * 1000);
 const countDown = ref<CountDownInstance>();
 

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     coupon: {
       name: '优惠券名称',
@@ -21,11 +21,12 @@ const t = useTranslate({
     },
     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[]>([]);

src/datetime-picker/demo/index.vue

@@ -2,7 +2,7 @@
 import { reactive } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     day: '日',
     year: '年',
@@ -29,8 +29,9 @@ const t = useTranslate({
     optionFilter: 'Option Filter',
     sortColumns: 'Columns Order',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value = reactive({
   date: new Date(2021, 0, 17),
   time: '12:00',

src/dialog/demo/index.vue

@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { Dialog } from '..';
 import type { DialogAction } from '../Dialog';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title: '标题',
     alert1: '提示弹窗',
@@ -24,8 +24,9 @@ const t = useTranslate({
     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';
 

src/divider/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '文本',
     dashed: '虚线',
@@ -16,7 +16,9 @@ const t = useTranslate({
     contentPosition: 'Content Position',
     customStyle: 'Custom Style',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     disableMenu: '禁用菜单',
     switchTitle1: '包邮',
@@ -42,9 +42,10 @@ const t = useTranslate({
       { text: 'Option C', value: 'c' },
     ],
   },
-});
+};
 
 const item = ref<DropdownItemInstance>();
+const t = useTranslate(i18n);
 
 const switch1 = ref(true);
 const switch2 = ref(false);

src/empty/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     error: '通用错误',
     search: '搜索提示',
@@ -21,8 +21,9 @@ const t = useTranslate({
     customImage: 'Custom Image',
     bottomContent: 'Bottom Content',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const active = ref('error');
 </script>
 

src/field/demo/Autosize.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     message: '留言',
     autosize: '高度自适应',
@@ -13,8 +13,9 @@ const t = useTranslate({
     autosize: 'Auto Resize',
     placeholder: 'Message',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value = ref('');
 </script>
 

src/field/demo/BasicUsage.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     label: '文本',
     placeholder: '请输入文本',
@@ -11,8 +11,9 @@ const t = useTranslate({
     label: 'Label',
     placeholder: 'Text',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value = ref('');
 </script>
 

src/field/demo/CustomType.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '文本',
     digit: '整数',
@@ -27,8 +27,9 @@ const t = useTranslate({
     phonePlaceholder: 'Phone',
     numberPlaceholder: 'Number',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const text = ref('');
 const phone = ref('');
 const digit = ref('');

src/field/demo/Disabled.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '文本',
     disabled: '禁用输入框',
@@ -13,7 +13,9 @@ const t = useTranslate({
     inputReadonly: 'Input Readonly',
     inputDisabled: 'Input Disabled',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

src/field/demo/ErrorInfo.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     phone: '手机号',
     errorInfo: '错误提示',
@@ -15,8 +15,9 @@ const t = useTranslate({
     phoneError: 'Invalid phone',
     phonePlaceholder: 'Phone',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const phone = ref('123');
 const username = ref('');
 </script>

src/field/demo/FormatValue.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '文本',
     formatValue: '格式化输入内容',
@@ -15,8 +15,9 @@ const t = useTranslate({
     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, '');

src/field/demo/InputAlign.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '文本',
     inputAlign: '输入框内容对齐',
@@ -13,8 +13,9 @@ const t = useTranslate({
     inputAlign: 'Input Align',
     alignPlaceHolder: 'Input Align Right',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value = ref('');
 </script>
 

src/field/demo/InsertButton.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     sms: '短信验证码',
     sendSMS: '发送验证码',
@@ -15,8 +15,9 @@ const t = useTranslate({
     insertButton: 'Insert Button',
     smsPlaceholder: 'SMS',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const sms = ref('');
 </script>
 

src/field/demo/ShowIcon.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '文本',
     showIcon: '显示图标',
@@ -13,8 +13,9 @@ const t = useTranslate({
     showIcon: 'Show Icon',
     showClearIcon: 'Show Clear Icon',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const icon1 = ref('');
 const icon2 = ref('123');
 </script>

src/field/demo/ShowWordLimit.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     message: '留言',
     placeholder: '请输入留言',
@@ -13,8 +13,9 @@ const t = useTranslate({
     placeholder: 'Message',
     showWordLimit: 'Show Word Limit',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value = ref('');
 </script>
 

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     submit: '提交',
     username: '用户名',
@@ -18,8 +18,9 @@ const t = useTranslate({
     requireUsername: 'Username is required',
     requirePassword: 'Password is required',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const username = ref('');
 const password = ref('');
 

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     rate: '评分',
     radio: '单选框',
@@ -35,8 +35,9 @@ const t = useTranslate({
     checkboxGroup: 'Checkbox Group',
     requireCheckbox: 'Checkbox is required',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const rate = ref(3);
 const radio = ref('1');
 const slider = ref(50);

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     picker: '地区选择',
     areaList,
@@ -16,8 +16,9 @@ const t = useTranslate({
     areaList: areaListEn,
     placeholder: 'Select area',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const areaCode = ref('');
 const showArea = ref(false);
 

src/form/demo/FieldTypeCalendar.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     calendar: '日历',
     placeholder: '点击选择日期',
@@ -11,8 +11,9 @@ const t = useTranslate({
     calendar: 'Calendar',
     placeholder: 'Select date',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const result = ref('');
 const showCalendar = ref(false);
 

src/form/demo/FieldTypeDatetimePicker.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     label: '时间选择',
     placeholder: '点击选择时间',
@@ -11,8 +11,9 @@ const t = useTranslate({
     label: 'Datetime Picker',
     placeholder: 'Select time',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const result = ref('');
 const showPicker = ref(false);
 

src/form/demo/FieldTypePicker.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     picker: '选择器',
     placeholder: '点击选择城市',
@@ -13,8 +13,9 @@ const t = useTranslate({
     placeholder: 'Select city',
     textColumns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
   },
-});
+};
 
+const t = useTranslate(i18n);
 const result = ref('');
 const showPicker = ref(false);
 

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     label: '文本',
     title: '校验规则',
@@ -29,8 +29,9 @@ const t = useTranslate({
     asyncValidator: 'Use async validator',
     validatorMessage: 'Use validator to return message',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value1 = ref('');
 const value2 = ref('');
 const value3 = ref('abc');

src/grid/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '文字',
     route: '页面导航',
@@ -26,7 +26,9 @@ const t = useTranslate({
     showBadge: 'Show Badge',
     horizontal: 'Horizontal',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

src/icon/demo/index.vue

@@ -31,7 +31,7 @@ function copyToClipboard(str: string) {
   }
 }
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title: '图标列表',
     badge: '徽标提示',
@@ -54,8 +54,9 @@ const t = useTranslate({
     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';

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     closed: '关闭',
     showClose: '展示关闭按钮',
@@ -27,7 +27,7 @@ const t = useTranslate({
     componentCall: 'Component Call',
     index: (index: number) => `Page: ${index}`,
   },
-});
+};
 
 const images = [
   'https://img.yzcdn.cn/vant/apple-1.jpg',
@@ -36,6 +36,7 @@ const images = [
   'https://img.yzcdn.cn/vant/apple-4.jpg',
 ];
 
+const t = useTranslate(i18n);
 const show = ref(false);
 const index = ref(0);
 

src/image/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     fitMode: '填充模式',
     round: '圆形图片',
@@ -20,8 +20,9 @@ const t = useTranslate({
     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>

src/index-bar/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '文本',
     customIndexList: '自定义索引列表',
@@ -11,8 +11,9 @@ const t = useTranslate({
     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];

src/lazyload/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title2: '背景图懒加载',
     title3: '懒加载模块',
@@ -10,7 +10,9 @@ const t = useTranslate({
     title2: 'Lazyload Background Image',
     title3: 'Lazyload Component',
   },
-});
+};
+
+const t = useTranslate(i18n);
 
 const imageList = [
   'https://img.yzcdn.cn/vant/apple-1.jpg',

src/list/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     errorInfo: '错误提示',
     errorText: '请求失败，点击重新加载',
@@ -15,8 +15,9 @@ const t = useTranslate({
     pullRefresh: 'PullRefresh',
     finishedText: 'Finished',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const list = ref([
   {
     items: [] as string[],

src/loading/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     type: '加载类型',
     text: '加载文案',
@@ -18,7 +18,9 @@ const t = useTranslate({
     vertical: 'Vertical',
     textColor: 'Text Color',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

src/nav-bar/demo/index.vue

@@ -2,15 +2,16 @@
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     useSlot: '使用插槽',
   },
   'en-US': {
     useSlot: 'Use Slot',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const onClickLeft = () => Toast(t('back'));
 const onClickRight = () => Toast(t('button'));
 </script>

src/notice-bar/demo/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '在代码阅读过程中人们说脏话的频率是衡量代码质量的唯一标准。',
     mode: '通知栏模式',
@@ -22,7 +22,9 @@ const t = useTranslate({
     scrollable: 'Scrollable',
     verticalScroll: 'Vertical Scroll',
   },
-});
+};
+
+const t = useTranslate(i18n);
 </script>
 
 <template>

src/notify/demo/index.vue

@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { Notify } from '..';
 import { NotifyType } from '../Notify';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     primary: '主要通知',
     success: '成功通知',
@@ -29,8 +29,9 @@ const t = useTranslate({
     componentCall: 'Component Call',
     customDuration: 'Custom Duration',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const show = ref(false);
 
 const showNotify = () => {

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     close: '完成',
     input: '输入',
@@ -36,8 +36,9 @@ const t = useTranslate({
     multiExtraKey: 'Multiple ExtraKey',
     randomKeyOrder: 'Random Key Order',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value = ref('');
 const keyboard = ref('default');
 

src/overlay/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     showOverlay: '显示遮罩层',
     embeddedContent: '嵌入内容',
@@ -11,8 +11,9 @@ const t = useTranslate({
     showOverlay: 'Show Overlay',
     embeddedContent: 'Embedded Content',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const show = ref(false);
 const showEmbedded = ref(false);
 </script>

src/pagination/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title2: '简单模式',
     title3: '显示省略号',
@@ -17,8 +17,9 @@ const t = useTranslate({
     prevText: 'Prev',
     nextText: 'Next',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const currentPage1 = ref(1);
 const currentPage2 = ref(1);
 const currentPage3 = ref(1);

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     info: '密码为 6 位数字',
     showInfo: '提示信息',
@@ -20,8 +20,9 @@ const t = useTranslate({
     removeMask: 'Remove Mask',
     customLength: 'Custom Length',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const initialValue = {
   showInfo: '123',
   addGutter: '123',

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     city: '城市',
     cascade: '级联选择',
@@ -68,8 +68,9 @@ const t = useTranslate({
     toastContent: (value: string, index: number) =>
       `Value: ${value}, Index：${index}`,
   },
-});
+};
 
+const t = useTranslate(i18n);
 const picker = ref();
 const showPicker = ref(false);
 const fieldValue = ref('');

src/popover/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     actions: [{ text: '选项一' }, { text: '选项二' }, { text: '选项三' }],
     shortActions: [{ text: '选项一' }, { text: '选项二' }],
@@ -50,7 +50,7 @@ const t = useTranslate({
     disableAction: 'Disable Action',
     choosePlacement: 'Placement',
   },
-});
+};
 
 const placements = [
   'top',
@@ -67,6 +67,7 @@ const placements = [
   'bottom-end',
 ];
 
+const t = useTranslate(i18n);
 const show = ref({
   showIcon: false,
   placement: false,

src/popup/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     position: '弹出位置',
     buttonBasic: '展示弹出层',
@@ -29,8 +29,9 @@ const t = useTranslate({
     customCloseIcon: 'Custom Icon',
     customIconPosition: 'Icon Position',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const showBasic = ref(false);
 const showTop = ref(false);
 const showBottom = ref(false);

src/progress/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title2: '置灰',
     title3: '样式定制',
@@ -15,7 +15,9 @@ const t = useTranslate({
     strokeWidth: 'Stroke Width',
     transition: 'Transition',
   },
-});
+};
+
+const t = useTranslate(i18n);
 
 const percentage = ref(50);
 

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     try: '下拉试试',
     text: '刷新次数',
@@ -18,8 +18,9 @@ const t = useTranslate({
     successTip: 'Success Tip',
     customTips: 'Custom Tips',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const count = ref(0);
 const loading = ref(false);
 

src/radio/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     radio: '单选框',
     text1: '未选中禁用',
@@ -27,8 +27,9 @@ const t = useTranslate({
     customIconSize: 'Custom Icon Size',
     disableLabel: 'Disable label click',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const radio1 = ref('1');
 const radio2 = ref('2');
 const radio3 = ref('1');

src/rate/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     halfStar: '半星',
     disabled: '禁用状态',
@@ -26,8 +26,9 @@ const t = useTranslate({
     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);

src/search/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     label: '地址',
     disabled: '禁用搜索框',
@@ -22,8 +22,9 @@ const t = useTranslate({
     customButton: 'Custom Action Button',
     listenToEvents: 'Listen to Events',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value1 = ref('');
 const value2 = ref('');
 const value3 = ref('');

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     qq: 'QQ',
     name: '名称',
@@ -39,8 +39,9 @@ const t = useTranslate({
     weappQrcode: 'Weapp Qrcode',
     wechatMoments: 'Wechat Moments',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const showBasic = ref(false);
 const showWithDesc = ref(false);
 const showMultiLine = ref(false);

src/sidebar/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title: '标签名',
     disabled: '禁用选项',
@@ -15,8 +15,9 @@ const t = useTranslate({
     showBadge: 'Show Badge',
     changeEvent: 'Change Event',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const active1 = ref(0);
 const active2 = ref(0);
 const active3 = ref(0);

src/skeleton/demo/index.vue

@@ -2,12 +2,13 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     showAvatar: '显示头像',
     showChildren: '显示子组件',
     title: '关于 Vant',
-    desc: 'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
+    desc:
+      'Vant 是一套轻量、可靠的移动端 Vue 组件库，提供了丰富的基础组件和业务组件，帮助开发者快速搭建移动应用。',
   },
   'en-US': {
     showAvatar: 'Show Avatar',
@@ -15,8 +16,9 @@ const t = useTranslate({
     title: 'About Vant',
     desc: 'Vant is a set of Mobile UI Components built on Vue.',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const show = ref(false);
 </script>
 

src/slider/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     text: '当前值：',
     title1: '基础用法',
@@ -26,8 +26,9 @@ const t = useTranslate({
     customStyle: 'Custom Style',
     customButton: 'Custom Button',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const value1 = ref(50);
 const value2 = ref([20, 60]);
 const value3 = ref(0);

src/stepper/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     step: '步长设置',
     range: '限制输入范围',
@@ -24,8 +24,9 @@ const t = useTranslate({
     disableInput: 'Disable Input',
     decimalLength: 'Decimal Length',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const stepper1 = ref(1);
 const stepper2 = ref(1);
 const stepper3 = ref(1);

src/steps/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     nextStep: '下一步',
     step1: '买家下单',
@@ -29,8 +29,9 @@ const t = useTranslate({
     status3: '【City】Status3',
     customStyle: 'Custom Style',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const active = ref(1);
 
 const nextStep = () => {

src/sticky/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     offsetTop: '吸顶距离',
     offsetBottom: '吸底距离',
@@ -13,8 +13,9 @@ const t = useTranslate({
     offsetBottom: 'Offset Bottom',
     setContainer: 'Set Container',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const container = ref(null);
 </script>
 

src/style/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     hairline: '1px 边框',
     ellipsis: '文字省略',
@@ -22,8 +22,9 @@ const t = useTranslate({
     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('');
 

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     tip1: '你的收货地址不支持同城送, 我们已为你推荐快递',
     tip2: '你的收货地址不支持同城送, ',
@@ -22,8 +22,9 @@ const t = useTranslate({
     clickLink: 'Click Link',
     clickButton: 'Submit',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const checked = ref(true);
 
 const onSubmit = () => Toast(t('clickButton'));

src/swipe-cell/demo/index.vue

@@ -2,7 +2,7 @@
 import { useTranslate } from '@demo/use-translate';
 import { Dialog } from '../../dialog';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     select: '选择',
     delete: '删除',
@@ -23,8 +23,9 @@ const t = useTranslate({
     beforeClose: 'Before Close',
     customContent: 'Custom Content',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const imageURL = 'https://img.yzcdn.cn/vant/ipad.jpeg';
 
 const beforeClose = ({ position }: { position: string }) => {

src/swipe/demo/index.vue

@@ -2,7 +2,7 @@
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title2: '懒加载',
     title3: '监听 change 事件',
@@ -19,8 +19,9 @@ const t = useTranslate({
     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',

src/switch/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Dialog } from '../../dialog';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     title: '标题',
     confirm: '提醒',
@@ -22,8 +22,9 @@ const t = useTranslate({
     customColor: 'Custom Color',
     asyncControl: 'Async Control',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const checked = ref(true);
 const checked2 = ref(true);
 const checked3 = ref(true);

src/tab/README.md

@@ -229,7 +229,7 @@ export default {
 | type | Can be set to `line` `card` | _string_ | `line` |
 | color | Tab color | _string_ | `#ee0a24` |
 | background | Background color | _string_ | `white` |
-| duration | Toggle tab's animation time | _number \| string_ | `0.3` |
+| duration | Toggle tab's animation time | _number \| string_ | `0.3` | - |
 | line-width | Width of tab line | _number \| string_ | `40px` |
 | line-height | Height of tab line | _number \| string_ | `3px` |
 | animated | Whether to change tabs with animation | _boolean_ | `false` |
@@ -240,7 +240,7 @@ export default {
 | lazy-render | Whether to enable tab content lazy render | _boolean_ | `true` |
 | scrollspy | Whether to use scrollspy mode | _boolean_ | `false` |
 | offset-top | Sticky offset top , supports `px` `vw` `vh` `rem` unit, default `px` | _number \| string_ | `0` |
-| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` |
+| swipe-threshold | Set swipe tabs threshold | _number \| string_ | `5` | - |
 | title-active-color | Title active color | _string_ | - |
 | title-inactive-color | Title inactive color | _string_ | - |
 | before-change | Callback function before changing tabs，return `false` to prevent change，support return Promise | _(name: number \| string) => boolean \| Promise\<boolean\>_ | - |
@@ -259,7 +259,6 @@ export default {
 | replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
 | title-style | Custom title style | _string \| Array \| object_ | - |
 | title-class | Custom title class name | _string \| Array \| object_ | - |
-| show-zero-badge `v3.2.2` | Whether to show badge when the value is zero | _boolean_ | `true` |
 
 ### Tabs Events
 

src/tab/README.zh-CN.md

@@ -270,7 +270,6 @@ export default {
 | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
 | title-style | 自定义标题样式 | _string \| Array \| object_ | - |
 | title-class | 自定义标题类名 | _string \| Array \| object_ | - |
-| show-zero-badge `v3.2.2` | 当 badge 为数字 0 时，是否展示徽标 | _boolean_ | `true` |
 
 ### Tabs Events
 

src/tab/Tab.tsx

@@ -10,7 +10,7 @@ import {
 } from 'vue';
 
 // Utils
-import { createNamespace, extend, truthProp, unknownProp } from '../utils';
+import { createNamespace, extend, unknownProp } from '../utils';
 import { TABS_KEY } from '../tabs/Tabs';
 
 // Composables
@@ -34,7 +34,6 @@ export default defineComponent({
     disabled: Boolean,
     titleClass: unknownProp,
     titleStyle: [String, Object] as PropType<string | CSSProperties>,
-    showZeroBadge: truthProp,
   }),
 
   setup(props, { slots }) {

src/tab/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     tab: '标签 ',
     title2: '标签栏滚动',
@@ -35,8 +35,9 @@ const t = useTranslate({
     matchByName: 'Match By Name',
     beforeChange: 'Before Change',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const active = ref(2);
 const activeName = ref('b');
 

src/tab/test/__snapshots__/index.spec.tsx.snap

@@ -1,50 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should not render zero badge when show-zero-badge prop is false 1`] = `
-<div class="van-tabs van-tabs--line">
-  <div class="van-tabs__wrap">
-    <div role="tablist"
-         class="van-tabs__nav van-tabs__nav--line"
-    >
-      <div role="tab"
-           class="van-tab van-tab--active"
-           aria-selected="true"
-      >
-        <div class="van-badge__wrapper">
-          <span class="van-tab__text van-tab__text--ellipsis">
-          </span>
-          <div class="van-badge van-badge--fixed">
-            0
-          </div>
-        </div>
-      </div>
-      <div role="tab"
-           class="van-tab"
-           aria-selected="false"
-      >
-        <div class="van-badge__wrapper">
-          <span class="van-tab__text van-tab__text--ellipsis">
-          </span>
-        </div>
-      </div>
-      <div class="van-tabs__line"
-           style="transform: translateX(0px) translateX(-50%);"
-      >
-      </div>
-    </div>
-  </div>
-  <div class="van-tabs__content">
-    <div role="tabpanel"
-         class="van-tab__pane"
-         style
-    >
-      1
-    </div>
-    <div role="tabpanel"
-         class="van-tab__pane"
-         style="display: none;"
-    >
-    </div>
-  </div>
-</div>
-`;

src/tab/test/index.spec.tsx

@@ -28,20 +28,3 @@ test('should emit click-tab event when tab is clicked', async () => {
     })
   );
 });
-
-test('should not render zero badge when show-zero-badge prop is false', async () => {
-  const wrapper = mount({
-    render() {
-      return (
-        <Tabs>
-          <Tab badge={0}>1</Tab>
-          <Tab badge={0} showZeroBadge={false}>
-            2
-          </Tab>
-        </Tabs>
-      );
-    },
-  });
-  await later();
-  expect(wrapper.html()).toMatchSnapshot();
-});

src/tabbar/demo/index.vue

@@ -3,7 +3,7 @@ import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     badge: '徽标提示',
     customIcon: '自定义图标',
@@ -18,8 +18,9 @@ const t = useTranslate({
     matchByName: 'Match by name',
     switchEvent: 'Change Event',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const active = ref(0);
 const active2 = ref(0);
 const active3 = ref(0);

src/tabs/Tabs.tsx

@@ -30,7 +30,6 @@ import {
   setRootScrollTop,
   ComponentInstance,
   BORDER_TOP_BOTTOM,
-  pick,
 } from '../utils';
 import { scrollLeftTo, scrollTopTo } from './utils';
 
@@ -375,11 +374,15 @@ export default defineComponent({
       children.map((item, index) => (
         <TabsTitle
           ref={setTitleRefs(index)}
+          dot={item.dot}
           type={props.type}
+          badge={item.badge}
+          title={item.title}
           color={props.color}
           style={item.titleStyle}
           class={item.titleClass}
           isActive={index === state.currentIndex}
+          disabled={item.disabled}
           scrollable={scrollable.value}
           renderTitle={item.$slots.title}
           activeColor={props.titleActiveColor}
@@ -387,13 +390,6 @@ export default defineComponent({
           onClick={(event: MouseEvent) => {
             onClickTab(item, index, event);
           }}
-          {...pick(item, [
-            'dot',
-            'badge',
-            'title',
-            'disabled',
-            'showZeroBadge',
-          ])}
         />
       ));
 

src/tabs/TabsTitle.tsx

@@ -1,5 +1,5 @@
 import { computed, CSSProperties, defineComponent } from 'vue';
-import { createNamespace, isDef, truthProp } from '../utils';
+import { createNamespace, isDef } from '../utils';
 import { Badge } from '../badge';
 
 const [name, bem] = createNamespace('tab');
@@ -19,14 +19,19 @@ export default defineComponent({
     activeColor: String,
     renderTitle: Function,
     inactiveColor: String,
-    showZeroBadge: truthProp,
   },
 
   setup(props) {
     const style = computed(() => {
       const style: CSSProperties = {};
-      const { type, color, disabled, isActive, activeColor, inactiveColor } =
+      const {
-        props;
+        type,
+        color,
+        disabled,
+        isActive,
+        activeColor,
+        inactiveColor,
+      } = props;
 
       const isCard = type === 'card';
 
@@ -60,11 +65,7 @@ export default defineComponent({
 
       if (props.dot || (isDef(props.badge) && props.badge !== '')) {
         return (
-          <Badge
+          <Badge dot={props.dot} content={props.badge}>
-            dot={props.dot}
-            content={props.badge}
-            showZero={props.showZeroBadge}
-          >
             {Text}
           </Badge>
         );

src/tag/demo/index.vue

@@ -2,7 +2,7 @@
 import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     type: '类型',
     mark: '标记样式',
@@ -34,8 +34,9 @@ const t = useTranslate({
     customTextColor: 'Text Color',
     customPlainColor: 'Plain Color',
   },
-});
+};
 
+const t = useTranslate(i18n);
 const show = ref(true);
 const close = () => {
   show.value = false;

src/toast/demo/index.vue

@@ -3,7 +3,7 @@ import { useTranslate } from '@demo/use-translate';
 import { Toast } from '..';
 import type { LoadingType } from '../../loading';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     fail: '失败提示',
     text: '提示内容',
@@ -40,7 +40,9 @@ const t = useTranslate({
     positionBottom: 'Bottom',
     customPosition: 'Custom Position',
   },
-});
+};
+
+const t = useTranslate(i18n);
 
 const showLoadingToast = (loadingType?: LoadingType) => {
   Toast.loading({

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 t = useTranslate({
+const i18n = {
   'zh-CN': {
     showBadge: '徽标提示',
     radioMode: '单选模式',
@@ -22,8 +22,9 @@ const t = useTranslate({
     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]);

src/uploader/demo/index.vue

@@ -4,7 +4,7 @@ import { useTranslate } from '@demo/use-translate';
 import { UploaderFileListItem } from '../types';
 import { Toast } from '../../toast';
 
-const t = useTranslate({
+const i18n = {
   'zh-CN': {
     status: '上传状态',
     failed: '上传失败',
@@ -41,7 +41,9 @@ const t = useTranslate({
     customPreviewImage: 'Custom single prevew image',
     deleteMessage: 'Before Delete',
   },
-});
+};
+
+const t = useTranslate(i18n);
 
 const fileList = ref([
   { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },