Skip to content

国际化 - Vant 4

🌍 国际化

🎯 介绍

Vant 就像是一个"语言魔法师" 🧙‍♂️!它采用中文作为默认语言,但同时拥有强大的多语言切换能力,让你的应用轻松跨越语言的边界,走向全球每一个角落。无论用户来自哪个国家,都能享受到母语般的亲切体验!

🛠️ 使用方法

🔄 多语言切换

Vant 通过 Locale 组件实现多语言支持,就像给你的应用装上了"万能翻译器" 🔄!使用 Locale.use 方法可以瞬间切换当前使用的语言,让界面文字华丽变身。

js
import { Locale } from'vant'; // 引入英文语言包import enUS from'vant/es/locale/lang/en-US'; Locale.use('en-US', enUS);

✏️ 覆盖语言包

通过 Locale.add 方法可以实现文案的修改和扩展,就像给语言包"化妆" 💄,让它更符合你的应用风格!示例如下:

js
import { Locale } from'vant'; const messages = { 'zh-CN': { vanPicker: { confirm: '关闭', // 将'确认'修改为'关闭' }, }, }; Locale.add(messages);

📦 语言包

目前支持的语言就像一个"联合国大家庭" 🏛️,涵盖了全球各个地区:

语言文件名版本
阿拉伯语ar-SAv3.5.0
保加利亚语bg-BGv3.5.0
孟加拉语(孟加拉国)bn-BDv3.4.5
丹麦语da-DKv3.4.8
德语de-DE-
德语(正式)de-DE-formal-
希腊语el-GRv3.5.0
英语en-US-
世界语eo-EOv4.0.9
西班牙语es-ES-
波斯语fa-IRv3.5.0
法语fr-FR-
希伯来语he-ILv3.5.0
印地语hi-INv3.4.3
印度尼西亚语id-IDv3.4.5
冰岛语is-ISv3.4.7
意大利语it-ITv3.4.5
日语ja-JP-
哈萨克语kk-KZ-
高棉语km-KHv4.1.2
韩语/朝鲜语ko-KRv3.4.3
老挝语la-LAv3.4.7
蒙古语mm-MNv4.0.5
挪威语nb-NO-
荷兰语nl-NLv4.0.5
波兰语pl-PLv4.9.17
葡萄牙语(巴西)pt-BRv3.3.3
罗马尼亚语ro-RO-
俄罗斯语ru-RUv3.1.5
塞尔维亚语sr-RSv4.6.4
瑞典语sv-SEv3.4.7
泰语th-TH-
土耳其语tr-TR-
乌克兰语uk-UAv3.4.5
越南语vi-VNv3.4.5
简体中文zh-CN-
繁體中文(港)zh-HK-
繁體中文(台)zh-TW-

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

🔍 获取当前语言

你可以通过 useCurrentLang 方法来获取当前使用的语言,就像查看"语言身份证" 🆔 一样简单!

  • 类型:
ts
functionuseCurrentLang(): Ref<string>;
  • 示例:
ts
import { useCurrentLang } from'vant'; const currentLang = useCurrentLang(); console.log(currentLang.value); // --> 'zh-CN'

🤔 常见问题

找不到所需的语言包?

如果上方列表中没有你需要的语言,欢迎给我们提 Pull Request 来增加新的语言包!就像为"联合国大家庭"添加新成员一样,改动内容可以参考增加德语语言包 的 PR。

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

可以使用 vue-i18n 来实现,它是 Vue 生态中的"国际化专家" 🌐!

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

目前没有提供 CDN 形式的语言包,可以手动拷贝语言包的内容来使用,就像"手工定制"一样精准!

语言包中不包含 Sku 组件?

语言包中默认不包含 Sku 业务组件的语言配置,因此如果有 Sku 组件的国际化需求,请自行配置国际化文案,让它也能说上"流利的外语"!

📚 相关文档

🎨 全局配置

🛠️ 开发指南

🌐 国际化相关

🔧 工具组件

基於Vant構建的企業級移動端解決方案