国际化 - 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-SA | v3.5.0 |
| 保加利亚语 | bg-BG | v3.5.0 |
| 孟加拉语(孟加拉国) | bn-BD | v3.4.5 |
| 丹麦语 | da-DK | v3.4.8 |
| 德语 | de-DE | - |
| 德语(正式) | de-DE-formal | - |
| 希腊语 | el-GR | v3.5.0 |
| 英语 | en-US | - |
| 世界语 | eo-EO | v4.0.9 |
| 西班牙语 | es-ES | - |
| 波斯语 | fa-IR | v3.5.0 |
| 法语 | fr-FR | - |
| 希伯来语 | he-IL | v3.5.0 |
| 印地语 | hi-IN | v3.4.3 |
| 印度尼西亚语 | id-ID | v3.4.5 |
| 冰岛语 | is-IS | v3.4.7 |
| 意大利语 | it-IT | v3.4.5 |
| 日语 | ja-JP | - |
| 哈萨克语 | kk-KZ | - |
| 高棉语 | km-KH | v4.1.2 |
| 韩语/朝鲜语 | ko-KR | v3.4.3 |
| 老挝语 | la-LA | v3.4.7 |
| 蒙古语 | mm-MN | v4.0.5 |
| 挪威语 | nb-NO | - |
| 荷兰语 | nl-NL | v4.0.5 |
| 波兰语 | pl-PL | v4.9.17 |
| 葡萄牙语(巴西) | pt-BR | v3.3.3 |
| 罗马尼亚语 | ro-RO | - |
| 俄罗斯语 | ru-RU | v3.1.5 |
| 塞尔维亚语 | sr-RS | v4.6.4 |
| 瑞典语 | sv-SE | v3.4.7 |
| 泰语 | th-TH | - |
| 土耳其语 | tr-TR | - |
| 乌克兰语 | uk-UA | v3.4.5 |
| 越南语 | vi-VN | v3.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 组件的国际化需求,请自行配置国际化文案,让它也能说上"流利的外语"!
📚 相关文档
🎨 全局配置
- ConfigProvider 全局配置 - 全局配置组件,统一管理应用设置
- Theme 主题定制 - 主题定制指南,打造专属视觉风格
- Style 内置样式 - 内置样式系统,快速构建美观界面
🛠️ 开发指南
- Advanced Usage 进阶用法 - 进阶用法指南,深度定制组件功能
- Best Practices 最佳实践 - 最佳实践指南,规范开发流程
🌐 国际化相关
- Vue I18n - Vue 官方国际化解决方案
- Intl API - 浏览器原生国际化 API
- Unicode CLDR - Unicode 通用语言数据仓库
🔧 工具组件
- Toast 轻提示 - 轻提示组件,多语言消息展示
- Dialog 弹出框 - 弹出框组件,多语言对话框
- Notify 消息通知 - 消息通知组件,多语言通知提醒