Categories: Vant3 教程

Vant3 国际化

介绍

Vant 采用中文作为默认语言,同时支持多语言切换,请按照下方教程进行国际化设置。

使用方法

多语言切换

Vant 通过 Locale 组件实现多语言支持,使用 Locale.use 方法可以切换当前使用的语言。

import { Locale } from vant;
// 引入英文语言包
import enUS from vant/es/locale/lang/en-US;

Locale.use(en-US, enUS);

覆盖语言包

通过 Locale.add 方法可以实现文案的修改和扩展,示例如下:

import { Locale } from vant;

const messages = {
  zh-CN: {
    vanPicker: {
      confirm: 关闭, // 将确认修改为关闭
    },
  },
};

Locale.add(messages);

语言包

目前支持的语言:

语言 文件名
简体中文 zh-CN
繁體中文(港) zh-HK
繁體中文(台) zh-TW
德语 de-DE
德语 (正式) de-DE-formal
英语 en-US
西班牙语 es-ES
日语 ja-JP
挪威语 nb-NO
罗马尼亚语 ro-RO
俄罗斯语 ru-RU
土耳其语 tr-TR
泰语 th-TH
法语 fr-FR

在 这里 查看所有的语言包源文件。

常见问题

找不到所需的语言包?

如果上方列表中没有你需要的语言,欢迎给我们提 Pull Request 来增加新的语言包,改动内容可以参考增加德语语言包 的 PR。

业务代码如何实现国际化?

可以使用 vue-i18n 来实现。

以 CDN 形式引入时,如何使用语言包?

目前没有提供 CDN 形式的语言包,可以手动拷贝语言包的内容来使用。

语言包中不包含 Sku 组件?

语言包中默认不包含 Sku 业务组件的语言配置,因此如果有 Sku 组件的国际化需求,请自行配置国际化文案。

terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

聊聊vue3中的defineProps

在Vue 3中,defineP…

1 周 ago

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

2 周 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

3 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

4 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

1 月 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

1 月 ago