# 国际化(多语言) 🎉 V2.2.15
- 多语言规范是基于中文框架的多语言 UI 组件标准；
- 多语言规范的更新将在钉钉群里发布（请扫描下方二维码加入群聊），请及时关注。如有问题，我们会在群里及时回复。
国际化（多语言）样式规范
Vue.use(WinDesign, { i18nOverflow: true })
1
请在单个组件中查看对应的 i18nOverflow 样式
# 🧩 WiNEX 框架下如何操作
# 🎉 方法一：只需要传入当前的语言标识即可
⚠️⚠️⚠️ WinDesign 组件库需升级至 V2.4.32 以上
i18nScope.ready(() => {
const lang = sessionStorage.getItem('language') || 'zh_CN'
// lang 优先级高于原先的 locale
// WinDesign 组件库需升级至 V2.4.32 以上
Vue.use(WinDesign, { lang, i18nOverflow: true, buttonI18nOverflow: false })
})
1
2
3
4
5
6
2
3
4
5
6
| 支持语言 | 地区编码（标识） | Version |
|---|---|---|
| 简体中文（中国） | zh-CN、zh_CN | |
| 繁體中文（香港） | zh-TW、zh_HK | |
| English（美国） | en、en_US | |
| Português（葡萄牙） | pt、pt_PT | |
| Spanish（西班牙） | es、es_ES | V2.4.45 |
# 方法二：
import zh_CN from 'win-design/lib/locale/lang/zh-CN'
import zh_HK from 'win-design/lib/locale/lang/zh-TW'
import en_US from 'win-design/lib/locale/lang/en'
import pt_PT from 'win-design/lib/locale/lang/pt'
const wLanguage = {
zh_CN,
zh_HK,
en_US,
pt_PT
}
i18nScope.ready(() => {
const lang = sessionStorage.getItem('language') || 'zh_CN'
Vue.use(WinDesign, {
locale: wLanguage[lang],
i18nOverflow: true,
buttonI18nOverflow: false
})
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 🧩 其它
WinDesign 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：
// 完整引入 WinDesign
import Vue from 'vue'
import WinDesign from 'win-design'
import locale from 'win-design/lib/locale/lang/en'
Vue.use(WinDesign, { locale })
1
2
3
4
5
6
2
3
4
5
6
或
// 按需引入 WinDesign
import Vue from 'vue'
import { Input, DatePicker } from 'win-design'
import lang from 'win-design/lib/locale/lang/en'
import locale from 'win-design/lib/locale'
// 设置语言
locale.use(lang)
// 引入组件
Vue.component(Input.name, Input)
Vue.component(DatePicker.name, DatePicker)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 兼容 vue-i18n@5.x
WinDesign 兼容 vue-i18n@5.x，搭配使用能更方便地实现多语言切换。
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import WinDesign from 'win-design'
import enLocale from 'win-design/lib/locale/lang/en'
import zhLocale from 'win-design/lib/locale/lang/zh-CN'
Vue.use(VueI18n)
Vue.use(WinDesign)
Vue.config.lang = 'zh-cn'
Vue.locale('zh-cn', zhLocale)
Vue.locale('en', enLocale)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 目前 WinDesign 内置了以下语言：
- 简体中文（zh-CN）
- 英语（en）
- 德语（de）
- 葡萄牙语（pt）
- 西班牙语（es）
- 丹麦语（da）
- 法语（fr）
- 挪威语（nb-NO）
- 繁体中文（zh-TW）
- 意大利语（it）
- 韩语（ko）
- 日语（ja）
- 荷兰语（nl）
- 越南语（vi）
- 俄语（ru-RU）
- 土耳其语（tr-TR）
- 巴西葡萄牙语（pt-br）
- 波斯语（fa）
- 泰语（th）
- 印尼语（id）
- 保加利亚语（bg）
- 波兰语（pl）
- 芬兰语（fi）
- 瑞典语（sv-SE）
- 希腊语（el）
- 斯洛伐克语（sk）
- 加泰罗尼亚语（ca）
- 捷克语（cs-CZ）
- 乌克兰语（ua）
- 土库曼语（tk）
- 泰米尔语（ta）
- 拉脱维亚语（lv）
- 南非荷兰语（af-ZA）
- 爱沙尼亚语（ee）
- 斯洛文尼亚语（sl）
- 阿拉伯语（ar）
- 希伯来语（he）
- 立陶宛语（lt）
- 蒙古语（mn）
- 哈萨克斯坦语（kz）
- 匈牙利语（hu）
- 罗马尼亚语（ro）
- 库尔德语（ku）
- 维吾尔语（ug-CN）
- 高棉语（km）
- 塞尔维亚语（sr）
- 巴斯克语（eu）
- 吉尔吉斯语（kg）
- 亚美尼亚语 (hy)
- 克罗地亚 (hr)
- 世界语 (eo)