docs: remove legacy locale mixin

docs/site/demo-locale.js

@@ -1,51 +1,17 @@
 import Locale from '../../src/locale';
 import enUS from '../../src/locale/lang/en-US';
-import { get } from '../../src/utils';
-import { camelize } from '../../src/utils/format/string';
 
 Locale.add({
   'en-US': enUS,
 });
 
-let demoUid = 0;
-
 export const DemoLocaleMixin = {
   computed: {
-    t() {
-      const { name } = this.$options;
-      const prefix = name ? camelize(name) + '.' : '';
-      const messages = Locale.messages();
-
-      return (path, ...args) => {
-        const message = get(messages, prefix + path) || get(messages, path);
-        return typeof message === 'function' ? message(...args) : message;
-      };
-    },
-
     // flag for vant-weapp demos
     isWeapp() {
       return location.search.indexOf('weapp=1') !== -1;
     },
   },
-
-  beforeCreate() {
-    if (!this.$options.name) {
-      this.$options.name = `demo-${demoUid++}`;
-    }
-
-    const { i18n, name } = this.$options;
-
-    if (i18n && name) {
-      const locales = {};
-      const camelizedName = camelize(name);
-
-      Object.keys(i18n).forEach((key) => {
-        locales[key] = { [camelizedName]: i18n[key] };
-      });
-
-      Locale.add(locales);
-    }
-  },
 };
 
 // switch lang after routing

src/badge/demo/index.vue

@@ -31,9 +31,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     max: '最大值',
     standalone: '独立展示',
@@ -46,6 +47,12 @@ export default {
     customColor: 'Custom Color',
     customContent: 'Custom Content',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>

src/button/demo/index.vue

@@ -72,9 +72,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     type: '按钮类型',
     size: '按钮尺寸',
@@ -133,6 +134,12 @@ export default {
     gradient: 'Gradient',
     blockElement: 'Block Element',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>

src/cell/demo/index.vue

@@ -74,9 +74,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     cell: '单元格',
     valueOnly: '只设置 value',
@@ -105,6 +106,12 @@ export default {
     useSlots: 'Use Slots',
     verticalCenter: 'Vertical center',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>

src/checkbox/demo/index.vue

@@ -105,10 +105,10 @@
 
 <script>
 import { ref, reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import { useRefs } from '../../composables/use-refs';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     checkbox: '复选框',
     customIcon: '自定义图标',
@@ -139,9 +139,11 @@ export default {
     horizontal: 'Horizontal',
     disableLabel: 'Disable label click',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       checkbox1: true,
       checkbox2: true,
@@ -174,6 +176,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       group,
       toggle,
       setRefs,

src/col/demo/index.vue

@@ -8,15 +8,11 @@
 
     <van-row>
       <van-col span="4">span: 4</van-col>
-      <van-col span="10" offset="4">
-        offset: 4, span: 10
-      </van-col>
+      <van-col span="10" offset="4"> offset: 4, span: 10 </van-col>
     </van-row>
 
     <van-row>
-      <van-col offset="12" span="12">
-        offset: 12, span: 12
-      </van-col>
+      <van-col offset="12" span="12"> offset: 12, span: 12 </van-col>
     </van-row>
   </demo-block>
 
@@ -55,9 +51,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     title2: '在列元素之间增加间距',
     justify: '对齐方式',
@@ -66,6 +63,12 @@ export default {
     title2: 'Column Spacing',
     justify: 'Justify Content',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>

src/divider/demo/index.vue

@@ -34,9 +34,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     text: '文本',
     dashed: '虚线',
@@ -51,6 +52,12 @@ export default {
     contentPosition: 'Content Position',
     customStyle: 'Custom Style',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>

src/grid/demo/index.vue

@@ -64,9 +64,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     text: '文字',
     route: '页面导航',
@@ -91,6 +92,12 @@ export default {
     showBadge: 'Show Badge',
     horizontal: 'Horizontal',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>

src/index-bar/demo/index.vue

@@ -26,11 +26,11 @@
   </van-tabs>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     text: '文本',
     customIndexList: '自定义索引列表',
@@ -39,9 +39,11 @@ export default {
     text: 'Text',
     customIndexList: 'Custom Index List',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const activeTab = ref(0);
     const indexList = [];
     const charCodeOfA = 'A'.charCodeAt(0);
@@ -51,6 +53,7 @@ export default {
     }
 
     return {
+      t,
       activeTab,
       indexList,
       customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10],

src/loading/demo/index.vue

@@ -27,9 +27,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     type: '加载类型',
     text: '加载文案',
@@ -44,6 +45,12 @@ export default {
     color: 'Color',
     vertical: 'Vertical',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>

src/notice-bar/demo/index.vue

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

src/overlay/demo/index.vue

@@ -24,11 +24,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     showOverlay: '显示遮罩层',
     embeddedContent: '嵌入内容',
@@ -37,15 +37,20 @@ export default {
     showOverlay: 'Show Overlay',
     embeddedContent: 'Embedded Content',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       show: false,
       showEmbedded: false,
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>

src/popup/demo/index.vue

@@ -93,11 +93,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     position: '弹出位置',
     buttonBasic: '展示弹出层',
@@ -124,9 +124,11 @@ export default {
     customCloseIcon: 'Custom Icon',
     customIconPosition: 'Icon Position',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       showBasic: false,
       showTop: false,
@@ -140,7 +142,10 @@ export default {
       showCustomIconPosition: false,
     });
 
-    return toRefs(state);
+    return {
+      ...toRefs(state),
+      t,
+    };
   },
 };
 </script>

src/progress/demo/index.vue

@@ -23,9 +23,10 @@
   </demo-block>
 </template>
 
-<script>
-export default {
-  i18n: {
+<script lang="ts">
+import { useTranslate } from '@demo/use-translate';
+
+const i18n = {
   'zh-CN': {
     title2: '置灰',
     title3: '样式定制',
@@ -36,6 +37,12 @@ export default {
     title3: 'Custom Style',
     strokeWidth: 'Stroke Width',
   },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    return { t };
   },
 };
 </script>

src/radio/demo/index.vue

@@ -91,11 +91,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     radio: '单选框',
     text1: '未选中禁用',
@@ -120,9 +120,11 @@ export default {
     customIconSize: 'Custom Icon Size',
     disableLabel: 'Disable label click',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       radio1: '1',
       radio2: '2',
@@ -137,6 +139,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
       inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
     };

src/stepper/demo/index.vue

@@ -47,10 +47,10 @@
 
 <script>
 import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 import Toast from '../../toast';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     step: '步长设置',
     range: '限制输入范围',
@@ -71,9 +71,11 @@ export default {
     disableInput: 'Disable Input',
     decimalLength: 'Decimal Length',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const state = reactive({
       stepper1: 1,
       stepper2: 1,
@@ -100,6 +102,7 @@ export default {
 
     return {
       ...toRefs(state),
+      t,
       beforeChange,
     };
   },

src/sticky/demo/index.vue

@@ -26,11 +26,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     offsetTop: '吸顶距离',
     setContainer: '指定容器',
@@ -39,11 +39,17 @@ export default {
     offsetTop: 'Offset Top',
     setContainer: 'Set Container',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const container = ref(null);
-    return { container };
+
+    return {
+      t,
+      container,
+    };
   },
 };
 </script>

src/tag/demo/index.vue

@@ -62,11 +62,11 @@
   </demo-block>
 </template>
 
-<script>
+<script lang="ts">
 import { ref } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-export default {
-  i18n: {
+const i18n = {
   'zh-CN': {
     type: '类型',
     mark: '标记样式',
@@ -98,15 +98,18 @@ export default {
     customTextColor: 'Text Color',
     customPlainColor: 'Plain Color',
   },
-  },
+};
 
+export default {
   setup() {
+    const t = useTranslate(i18n);
     const show = ref(true);
     const close = () => {
       show.value = false;
     };
 
     return {
+      t,
       show,
       close,
     };