内置文案语言切换

示例展示了 ProForm 内置占位符（请输入）如何跟随宿主组件库语言自动切换。

实现方式

1. 通过 vant 的 Locale.use(lang) 切换语言（zh-CN / zh-TW / en-US）
2. pro-components 内置文案自动跟随切换，无需任何额外配置
3. 如需覆盖个别文案，可通过 ProComponentProvider :locale 按 key 覆盖（如 { 'input.placeholder': 'Type here' }）

语言切换

姓名

性别

男

女

爱好

阅读

运动

代码实现

<script setup lang="ts">
import { h, ref, watch } from 'vue';
import { Locale, Button, Space, Radio, Checkbox } from 'vant';
import { ProComponentProvider, ProForm, useForm } from '@qin-ui/vant-pro';
import zhCN from 'vant/es/locale/lang/zh-CN';
import zhTW from 'vant/es/locale/lang/zh-TW';
import enUS from 'vant/es/locale/lang/en-US';

type FormData = {
  name: string;
  gender: number;
  hobby: string[];
};

type Lang = 'zh-CN' | 'zh-TW' | 'en-US';

// 通过 vant 的 Locale.use 切换语言，ProForm 内置占位符（请输入）随之切换
const lang = ref<Lang>('zh-CN');
const langPacks: Record<Lang, Record<string, any>> = {
  'zh-CN': zhCN,
  'zh-TW': zhTW,
  'en-US': enUS,
};
watch(lang, val => {
  Locale.use(val, langPacks[val]);
});

const form = useForm<FormData>({}, [
  { label: '姓名', path: 'name', component: 'field' },
  {
    label: '性别',
    path: 'gender',
    component: 'radio-group',
    slots: {
      default: () => [
        h(Radio, { name: 1 }, () => '男'),
        h(Radio, { name: 2 }, () => '女'),
      ],
    },
  },
  {
    label: '爱好',
    path: 'hobby',
    component: 'checkbox-group',
    slots: {
      default: () => [
        h(Checkbox, { name: 'reading' }, () => '阅读'),
        h(Checkbox, { name: 'sports' }, () => '运动'),
      ],
    },
  },
]);

const submit = async () => {
  await form.formRef.value?.validate();
  console.log('表单提交数据:', { ...form.formData });
};
</script>

<template>
  <div class="demo-wrapper">
    <Space style="margin-bottom: 16px">
      <Button
        v-for="item in ['zh-CN', 'zh-TW', 'en-US'] as Lang[]"
        :key="item"
        :type="lang === item ? 'primary' : 'default'"
        size="small"
        @click="lang = item"
      >
        {{ item }}
      </Button>
    </Space>

    <ProComponentProvider>
      <ProForm :form="form">
        <div style="margin: 16px">
          <Button type="primary" native-type="submit" @click="submit">
            提交
          </Button>
        </div>
      </ProForm>
    </ProComponentProvider>
  </div>
</template>