Skip to content

Commit c978ceb

Browse files
author
weilei
committed
feat(docs): 添加国际化文档,更新配置以支持多语言内容
1 parent e96af1a commit c978ceb

File tree

2 files changed

+139
-1
lines changed

2 files changed

+139
-1
lines changed

docs/src/.vuepress/config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ module.exports = {
2222
{
2323
title: '指南',
2424
collapsable: false,
25-
children: ['', 'develop'],
25+
children: ['', 'develop', 'i18n'],
2626
},
2727
],
2828
'/components/': [

docs/src/guide/i18n.md

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
# 国际化
2+
3+
Element UI X 提供了与 Element UI 完全兼容的国际化解决方案,支持 vue-i18n@5.xvue-i18n@6.x+ 以及其他 i18n 插件。
4+
5+
## 支持的语言
6+
7+
- 中文简体 (zh-CN)
8+
- 繁体中文 (zh-TW)
9+
- 英文 (en)
10+
- 日语 (ja-JP)
11+
- 韩语 (ko-KR)
12+
- 法语 (fr-FR)
13+
- 德语 (de-DE)
14+
- 西班牙语 (es-ES)
15+
- 俄语 (ru-RU)
16+
- 葡萄牙语 (pt-BR)
17+
- 意大利语 (it-IT)
18+
- 阿拉伯语 (ar-SA)
19+
- 法语 (fr-FR)
20+
- 德语 (de-DE)
21+
- 西班牙语 (es-ES)
22+
- 俄语 (ru-RU)
23+
- 葡萄牙语 (pt-BR)
24+
- 意大利语 (it-IT)
25+
- 阿拉伯语 (ar-SA)
26+
- 繁体中文 (zh-TW)
27+
28+
## 使用方式
29+
30+
### 1. 完整引入 + 默认语言设置
31+
32+
```javascript
33+
import Vue from 'vue';
34+
import ElementUIX from 'vue-element-ui-x';
35+
import enLang from 'vue-element-ui-x/lib/locale/lang/en';
36+
37+
Vue.use(ElementUIX, { locale: enLang });
38+
39+
// 其他语言示例
40+
import jaLang from 'vue-element-ui-x/lib/locale/lang/ja';
41+
import frLang from 'vue-element-ui-x/lib/locale/lang/fr';
42+
import deLang from 'vue-element-ui-x/lib/locale/lang/de';
43+
44+
// Vue.use(ElementUIX, { locale: jaLang }); // 日语
45+
// Vue.use(ElementUIX, { locale: frLang }); // 法语
46+
// Vue.use(ElementUIX, { locale: deLang }); // 德语
47+
```
48+
49+
### 2. 按需引入 + 手动设置语言
50+
51+
```javascript
52+
import Vue from 'vue';
53+
import { ElXThinking, ElXSender, locale } from 'vue-element-ui-x';
54+
import enLang from 'vue-element-ui-x/lib/locale/lang/en';
55+
56+
// 设置语言
57+
locale.use(enLang);
58+
59+
// 注册组件
60+
Vue.component(ElXThinking.name, ElXThinking);
61+
Vue.component(ElXSender.name, ElXSender);
62+
```
63+
64+
### 3. 兼容 vue-i18n@5.x
65+
66+
```javascript
67+
import Vue from 'vue';
68+
import VueI18n from 'vue-i18n';
69+
import ElementUIX, { locale } from 'vue-element-ui-x';
70+
71+
Vue.use(VueI18n);
72+
Vue.use(ElementUIX);
73+
74+
// 配置 vue-i18n@5.x
75+
Vue.config.lang = 'en';
76+
Vue.locale('en', {
77+
// 你的应用翻译
78+
message: 'Hello',
79+
// Element UI X 翻译
80+
...locale.lang.en,
81+
});
82+
Vue.locale('zh-cn', {
83+
// 你的应用翻译
84+
message: '你好',
85+
// Element UI X 翻译
86+
...locale.lang['zh-CN'],
87+
});
88+
```
89+
90+
### 4. 兼容 vue-i18n@6.x+
91+
92+
```javascript
93+
import Vue from 'vue';
94+
import VueI18n from 'vue-i18n';
95+
import ElementUIX, { locale } from 'vue-element-ui-x';
96+
97+
Vue.use(VueI18n);
98+
99+
const i18n = new VueI18n({
100+
locale: 'en',
101+
messages: {
102+
en: {
103+
message: 'Hello',
104+
...locale.lang.en,
105+
},
106+
'zh-CN': {
107+
message: '你好',
108+
...locale.lang['zh-CN'],
109+
},
110+
},
111+
});
112+
113+
// 配置 Element UI X 使用 vue-i18n
114+
locale.i18n((key, value) => i18n.t(key, value));
115+
116+
Vue.use(ElementUIX);
117+
118+
new Vue({
119+
i18n,
120+
// ...
121+
}).$mount('#app');
122+
```
123+
124+
### 5. 兼容其他 i18n 插件
125+
126+
```javascript
127+
import Vue from 'vue';
128+
import ElementUIX, { locale } from 'vue-element-ui-x';
129+
import myI18n from 'my-i18n-plugin';
130+
131+
// 配置自定义翻译函数
132+
locale.i18n((key, value) => {
133+
// 你的自定义翻译逻辑
134+
return myI18n.translate(key, value);
135+
});
136+
137+
Vue.use(ElementUIX);
138+
```

0 commit comments

Comments
 (0)