mirror of
https://github.com/element-plus/element-plus.git
synced 2025-01-18 10:59:10 +08:00
feat(project): Update with functionality to compat with vue-i18n (#1306)
This commit is contained in:
jeremywu
GitHub
parent
17d4bc6fee
commit
5e031237e3
@ -89,7 +89,7 @@ import ElVirtualList from '@element-plus/virtual-list'
|
||||
import ElSpace from '@element-plus/space'
|
||||
import ElSkeleton from '@element-plus/skeleton'
|
||||
import ElSkeletonItem from '@element-plus/skeleton-item'
|
||||
import { use } from '@element-plus/locale'
|
||||
import { use, i18n } from '@element-plus/locale'
|
||||
// if you encountered problems alike "Can't resolve './version'"
|
||||
// please run `yarn bootstrap` first
|
||||
import { version as version_ } from './version'
|
||||
@ -204,6 +204,9 @@ const plugins = [
|
||||
const install = (app: App, opt: InstallOptions): void => {
|
||||
const option = Object.assign(defaultInstallOpt, opt)
|
||||
locale(option.locale)
|
||||
if (option.i18n) {
|
||||
i18n(option.i18n)
|
||||
}
|
||||
app.config.globalProperties.$ELEMENT = option
|
||||
setConfig(option)
|
||||
|
||||
|
||||
@ -1,7 +1,23 @@
|
||||
import defaultLang from './lang/en'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
let lang = defaultLang
|
||||
|
||||
export type TranslatePair = {
|
||||
[key: string]: string | string[] | TranslatePair
|
||||
}
|
||||
|
||||
export type Language = {
|
||||
name: string
|
||||
el: TranslatePair
|
||||
}
|
||||
|
||||
let lang: Language = defaultLang as Language
|
||||
|
||||
let i18nHandler: null | ((...args: any[]) => string) = null
|
||||
|
||||
export const i18n = (fn: (...args: any[]) => string) => {
|
||||
i18nHandler = fn
|
||||
}
|
||||
|
||||
function template(str: string, option) {
|
||||
if(!str || !option) return str
|
||||
@ -11,7 +27,10 @@ function template(str: string, option) {
|
||||
})
|
||||
}
|
||||
|
||||
export const t = (path:string, option?): string => {
|
||||
export const t = (...args: any[]): string => {
|
||||
if (i18nHandler) return i18nHandler(...args)
|
||||
|
||||
const [path, option] = args
|
||||
let value
|
||||
const array = path.split('.')
|
||||
let current = lang
|
||||
@ -25,11 +44,11 @@ export const t = (path:string, option?): string => {
|
||||
return ''
|
||||
}
|
||||
|
||||
export const use = (l): void => {
|
||||
export const use = (l: Language): void => {
|
||||
lang = l || lang
|
||||
if (lang.name) {
|
||||
dayjs.locale(lang.name)
|
||||
}
|
||||
}
|
||||
|
||||
export default { use, t }
|
||||
export default { use, t, i18n }
|
||||
|
||||
@ -3,6 +3,7 @@ export interface InstallOptions {
|
||||
size: ComponentSize
|
||||
zIndex: number
|
||||
locale?: any
|
||||
i18n?: (...args: any[]) => string
|
||||
}
|
||||
|
||||
let $ELEMENT = { } as InstallOptions
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
The default locale of Element Plus is English. If you want to use another language, you'll need to do some i18n configuration. In your entry file, if you are importing Element Plus entirely:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
@ -13,7 +13,7 @@ createApp(App).use(ElementPlus, { locale })
|
||||
|
||||
Or if you are importing Element Plus on demand:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import { ElButton, ElSelect } from 'element-plus'
|
||||
import lang from 'element-plus/lib/locale/lang/zh-cn'
|
||||
@ -31,7 +31,8 @@ Vue.component(ElSelect.name, ElSelect)
|
||||
### Set Day.js locale
|
||||
|
||||
Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import 'dayjs/locale/zh-cn'
|
||||
|
||||
@ -40,7 +41,8 @@ app.use(ElementPlus, { locale })
|
||||
```
|
||||
|
||||
However, you can use another Day.js locale if needed.
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import 'dayjs/locale/fr'
|
||||
dayjs.locale('fr')
|
||||
```
|
||||
@ -48,121 +50,144 @@ dayjs.locale('fr')
|
||||
The English locale is imported by default, even if you're using another locale. But with `NormalModuleReplacementPlugin` provided by webpack you can replace default locale:
|
||||
|
||||
webpack.config.js
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/zh-cn')
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
|
||||
'element-plus/lib/locale/lang/zh-cn',
|
||||
),
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Compatible with `vue-i18n@5.x`
|
||||
### Compatible `vue-i18n@9.x`
|
||||
|
||||
Element Plus is compatible with [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), which makes multilingual switching even easier.
|
||||
If you need to check out [VueI18n documentation](https://vue-i18n-next.intlify.dev/guide/#html), please click this link to check it out.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
Vue.use(VueI18n)
|
||||
|
||||
Vue.config.lang = 'zh-cn'
|
||||
Vue.locale('zh-cn', zhLocale)
|
||||
Vue.locale('en', enLocale)
|
||||
```
|
||||
|
||||
## Compatible with other i18n plugins
|
||||
Element Plus may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element Plus processes i18n.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(ElementPlus, {
|
||||
i18n: function (path, options) {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Compatible with `vue-i18n@6.x`
|
||||
|
||||
You need to manually handle it for compatibility with `6.x`.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
|
||||
[enLocale.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: enLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
Vue.use(ElementPlus, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(ElementPlus, {
|
||||
i18n: i18n.global.t,
|
||||
})
|
||||
|
||||
new Vue({ i18n }).$mount('#app')
|
||||
// Remember to use this plugin.
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## Custom i18n in on-demand components
|
||||
### Compatible with other i18n plugins
|
||||
|
||||
```js
|
||||
Element Plus may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element Plus processes i18n.
|
||||
|
||||
:::tip
|
||||
Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string.
|
||||
:::
|
||||
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import DatePicker from 'element/lib/date-picker'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
// The is the signature of i18n method.
|
||||
type i18n = (...args: any[]) => string
|
||||
Vue.use(Element, {
|
||||
i18n: function(path, options) {
|
||||
// ...
|
||||
},
|
||||
// others.
|
||||
})
|
||||
```
|
||||
|
||||
### Custom i18n in on-demand components
|
||||
|
||||
If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html)
|
||||
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import ElementLocale from 'element-plus/lib/locale'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(DatePicker)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale
|
||||
[enLocale.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: enLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
ElementLocale.i18n(i18n.global.t)
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## Import via CDN
|
||||
### Import via CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
@ -185,12 +210,41 @@ Compatible with `vue-i18n`
|
||||
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
Vue.locale('en', ELEMENT.lang.en)
|
||||
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
|
||||
const i18n = Vue18n.createI18n({
|
||||
locale: Element.lang.zhCN.name,
|
||||
fallbackLocale: Element.lang.en.name,
|
||||
messages: {
|
||||
[ELEMENT.lang.en.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: ELEMENT.lang.en.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[ELEMENT.lang.zhCN.name]: {
|
||||
el: ELEMENT.lang.zhCN.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang.
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const app = Vue.createApp()
|
||||
app.use(i18n)
|
||||
</script>
|
||||
```
|
||||
|
||||
Currently Element Plus ships with the following languages:
|
||||
|
||||
<ul class="language-list">
|
||||
<li>Simplified Chinese (zh-cn)</li>
|
||||
<li>English (en)</li>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
El idioma predeterminado de Element Plus es el inglés. Si se desea utilizar otro idioma, será necesario realizar alguna configuración de i18n. En su fichero de entrada, si está importando Element Plus por completo:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import locale from 'element-plus/lib/locale/lang/es'
|
||||
@ -13,7 +13,7 @@ createApp(App).use(ElementPlus, { locale })
|
||||
|
||||
O si está importando Element Plus a petición:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import { ElButton, ElSelect } from 'element-plus'
|
||||
import lang from 'element-plus/lib/locale/lang/es'
|
||||
@ -31,7 +31,8 @@ Vue.component(ElSelect.name, ElSelect)
|
||||
### Set Day.js locale
|
||||
|
||||
Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import locale from 'element-plus/lib/locale/lang/es'
|
||||
import 'dayjs/locale/es'
|
||||
|
||||
@ -40,7 +41,8 @@ app.use(ElementPlus, { locale })
|
||||
```
|
||||
|
||||
However, you can use another Day.js locale if needed.
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import 'dayjs/locale/fr'
|
||||
dayjs.locale('fr')
|
||||
```
|
||||
@ -48,121 +50,147 @@ dayjs.locale('fr')
|
||||
El paquete de idioma inglés se importa por defecto, incluso si se esta usando otro idioma. Pero con `NormalModuleReplacementPlugin` proporcionado por el webpack puede reemplazar la localización predeterminada:
|
||||
|
||||
webpack.config.js
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/es')
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
|
||||
'element-plus/lib/locale/lang/es',
|
||||
),
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Compatible con `vue-i18n@5.x`
|
||||
### Compatible con `vue-i18n@9.x`
|
||||
Need translation
|
||||
|
||||
Element Plus es compatible con [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), lo que facilita aún más la conmutación multilenguaje.
|
||||
If you need to check out [VueI18n documentation](https://vue-i18n-next.intlify.dev/guide/#html), please click this link to check it out.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
Vue.use(VueI18n)
|
||||
|
||||
Vue.config.lang = 'zh-cn'
|
||||
Vue.locale('zh-cn', zhLocale)
|
||||
Vue.locale('en', enLocale)
|
||||
```
|
||||
|
||||
## Compatible con otros plugins i18n
|
||||
Es posible que Element Plus no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element Plus procesa i18n.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: function (path, options) {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Compatible con `vue-i18n@6.x`
|
||||
|
||||
Necesita manejarlo manualmente para ser compatible con `6.x`.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
|
||||
[enLocale.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: enLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(ElementPlus, {
|
||||
i18n: i18n.global.t,
|
||||
})
|
||||
|
||||
new Vue({ i18n }).$mount('#app')
|
||||
// Remember to use this plugin.
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## Personalización de i18n en componentes bajo petición
|
||||
### Compatible con otros plugins i18n
|
||||
Es posible que Element Plus no sea compatible con otros plugins i18n que no sean vue-i18n, pero puede personalizar la forma en que Element Plus procesa i18n.
|
||||
|
||||
```js
|
||||
Need translation
|
||||
|
||||
:::tip
|
||||
Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string.
|
||||
:::
|
||||
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import DatePicker from 'element/lib/date-picker'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
// The is the signature of i18n method.
|
||||
type i18n = (...args: any[]) => string
|
||||
Vue.use(Element, {
|
||||
i18n: function(path, options) {
|
||||
// ...
|
||||
},
|
||||
// others.
|
||||
})
|
||||
```
|
||||
### Personalización de i18n en componentes bajo petición
|
||||
|
||||
Need translation
|
||||
|
||||
If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html)
|
||||
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import ElementLocale from 'element-plus/lib/locale'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(DatePicker)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale
|
||||
[enLocale.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: enLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
ElementLocale.i18n(i18n.global.t)
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## Importar via CDN
|
||||
### Importar via CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
@ -185,12 +213,42 @@ Compatible con `vue-i18n`
|
||||
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
Vue.locale('en', ELEMENT.lang.en)
|
||||
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
|
||||
// Need translation
|
||||
const i18n = Vue18n.createI18n({
|
||||
locale: Element.lang.zhCN.name,
|
||||
fallbackLocale: Element.lang.en.name,
|
||||
messages: {
|
||||
[ELEMENT.lang.en.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: ELEMENT.lang.en.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[ELEMENT.lang.zhCN.name]: {
|
||||
el: ELEMENT.lang.zhCN.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang.
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const app = Vue.createApp()
|
||||
app.use(i18n)
|
||||
</script>
|
||||
```
|
||||
|
||||
Actualmente Element Plus está disponible en los siguientes idiomas:
|
||||
|
||||
<ul class="language-list">
|
||||
<li>Simplified Chinese (zh-cn)</li>
|
||||
<li>English (en)</li>
|
||||
@ -245,4 +303,4 @@ Actualmente Element Plus está disponible en los siguientes idiomas:
|
||||
<li>Esperanto (eo)</li>
|
||||
</ul>
|
||||
|
||||
Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) otra configuración de idioma y cree un pull request.
|
||||
Si su idioma de destino no está incluido, puede contribuir: simplemente añada [aqui](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang) otra configuración de idioma y cree un pull request.
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
La langue par défaut d'Element Plus est le Anglais. Si vous souhaitez utiliser une autre langue, il vous faudra la configurer. Par exemple, dans votre fichier d'entrée, si vous importez Element Plus entièrement:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import locale from 'element-plus/lib/locale/lang/fr'
|
||||
@ -13,7 +13,7 @@ createApp(App).use(ElementPlus, { locale })
|
||||
|
||||
Ou si vous importez Element Plus à la demande:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import { ElButton, ElSelect } from 'element-plus'
|
||||
import lang from 'element-plus/lib/locale/lang/fr'
|
||||
@ -31,7 +31,8 @@ Vue.component(ElSelect.name, ElSelect)
|
||||
### Set Day.js locale
|
||||
|
||||
Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import locale from 'element-plus/lib/locale/lang/fr'
|
||||
import 'dayjs/locale/fr'
|
||||
|
||||
@ -40,7 +41,8 @@ app.use(ElementPlus, { locale })
|
||||
```
|
||||
|
||||
However, you can use another Day.js locale if needed.
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import 'dayjs/locale/es'
|
||||
dayjs.locale('es')
|
||||
```
|
||||
@ -48,124 +50,146 @@ dayjs.locale('es')
|
||||
La pack de la langue Anglais est importé par défaut, même si vous configurez une autre langue. En utilisant le `NormalModuleReplacementPlugin` fournit par webpack vous pouvez remplacer la locale par défaut:
|
||||
|
||||
webpack.config.js
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/fr')
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
|
||||
'element-plus/lib/locale/lang/fr',
|
||||
),
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## Compatible avec `vue-i18n@5.x`
|
||||
### Compatible avec `vue-i18n@9.x`
|
||||
|
||||
Element Plus est compatible avec [vue-i18n@5.x](https://github.com/kazupon/vue-i18n), ce qui rend le changement de langue encore plus simple.
|
||||
Element Plus est compatible avec [vue-i18n@9.x](https://vue-i18n-next.intlify.dev/guide/#html), ce qui rend le changement de langue encore plus simple.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import App from './App.vue';
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
[enLocale.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: enLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||||
},
|
||||
}
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
Vue.use(VueI18n)
|
||||
|
||||
Vue.config.lang = 'zh-cn'
|
||||
Vue.locale('zh-cn', zhLocale)
|
||||
Vue.locale('en', enLocale)
|
||||
app.use(ElementPlus, {
|
||||
i18n: i18n.global.t,
|
||||
})
|
||||
|
||||
// Remember to use this plugin.
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## Compatible avec d'autres plugins i18n
|
||||
### Compatible avec d'autres plugins i18n
|
||||
|
||||
Element Plus n'est pas forcément compatible avec d'autres plugins i18n que vue-i18n, mais vous pouvez configurer le fonctionnement i18n.
|
||||
|
||||
```javascript
|
||||
:::tip
|
||||
Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string.
|
||||
:::
|
||||
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
// The is the signature of i18n method.
|
||||
type i18n = (...args: any[]) => string
|
||||
Vue.use(Element, {
|
||||
i18n: function (path, options) {
|
||||
i18n: function(path, options) {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Compatible avec `vue-i18n@6.x`
|
||||
|
||||
Vous devrez le configurer manuellement pour la compatibilité avec `6.x`.
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale // Ou utilisez `Object.assign({ message: 'hello' }, enLocale)`
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale // Ou utilisez `Object.assign({ message: '你好' }, zhLocale)`
|
||||
}
|
||||
}
|
||||
|
||||
// Crée l'instance de VueI18n avec ses options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // indique la locale
|
||||
messages, // indique les messages
|
||||
// others.
|
||||
})
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
})
|
||||
|
||||
new Vue({ i18n }).$mount('#app')
|
||||
```
|
||||
|
||||
## i18n personnalisée dans les composants à la demande
|
||||
### i18n personnalisée dans les composants à la demande
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import DatePicker from 'element/lib/date-picker'
|
||||
import VueI18n from 'vue-i18n'
|
||||
Need translation
|
||||
|
||||
If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html)
|
||||
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import ElementLocale from 'element-plus/lib/locale'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(DatePicker)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale
|
||||
[enLocale.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: enLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale
|
||||
}
|
||||
}
|
||||
|
||||
// Crée l'instance de VueI18n avec ses options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // indique la locale
|
||||
messages, // indique les messages
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
ElementLocale.i18n(i18n.global.t)
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## Import via un CDN
|
||||
### Import via un CDN
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
@ -174,7 +198,37 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
<script src="//unpkg.com/dayjs/locale/fr.js"></script>
|
||||
|
||||
<script>
|
||||
ELEMENT.locale(ELEMENT.lang.fr)
|
||||
// Need translation
|
||||
const i18n = Vue18n.createI18n({
|
||||
locale: Element.lang.zhCN.name,
|
||||
fallbackLocale: Element.lang.en.name,
|
||||
messages: {
|
||||
[ELEMENT.lang.en.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: ELEMENT.lang.en.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[ELEMENT.lang.zhCN.name]: {
|
||||
el: ELEMENT.lang.zhCN.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang.
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const app = Vue.createApp()
|
||||
app.use(i18n)
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -194,6 +248,7 @@ Compatible avec `vue-i18n`
|
||||
```
|
||||
|
||||
Actuellement, Element Plus supporte les langues suivantes:
|
||||
|
||||
<ul class="language-list">
|
||||
<li>Chinois simplifié (zh-cn)</li>
|
||||
<li>Anglais (en)</li>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
## 国際化
|
||||
|
||||
Element Plusのデフォルト言語は英語です。他の言語を使用したい場合は、i18nの設定を行う必要があります。Element Plusを完全にインポートする場合のエントリーファイル:
|
||||
Element Plus のデフォルト言語は英語です。他の言語を使用したい場合は、i18n の設定を行う必要があります。Element Plus を完全にインポートする場合のエントリーファイル:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'dayjs/locale/ja'
|
||||
@ -11,9 +11,9 @@ import locale from 'element-plus/lib/locale/lang/ja'
|
||||
createApp(App).use(ElementPlus, { locale })
|
||||
```
|
||||
|
||||
または Element Plusをインポートする際は必要に応じて以下の記述します。:
|
||||
または Element Plus をインポートする際は必要に応じて以下の記述します。:
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import { ElButton, ElSelect } from 'element-plus'
|
||||
import lang from 'element-plus/lib/locale/lang/ja'
|
||||
@ -31,7 +31,8 @@ Vue.component(ElSelect.name, ElSelect)
|
||||
### Set Day.js locale
|
||||
|
||||
Element Plus use date time locale (month name, first day of the week ...) from [Day.js](https://day.js.org/) directlly. And will set the global Day.js locale automaticatlly after the locale file is loaded.
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import locale from 'element-plus/lib/locale/lang/ja'
|
||||
import 'dayjs/locale/ja'
|
||||
|
||||
@ -40,129 +41,159 @@ app.use(ElementPlus, { locale })
|
||||
```
|
||||
|
||||
However, you can use another Day.js locale if needed.
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import 'dayjs/locale/fr'
|
||||
dayjs.locale('fr')
|
||||
```
|
||||
|
||||
たとえ、別の言語を使っていても、英語パックはデフォルトでインポートされます。 しかしながら、webpackで提供されている `NormalModuleReplacementPlugin` を使えばデフォルトlocaleを差し替えることが出来ます:
|
||||
たとえ、別の言語を使っていても、英語パックはデフォルトでインポートされます。 しかしながら、webpack で提供されている `NormalModuleReplacementPlugin` を使えばデフォルト locale を差し替えることが出来ます:
|
||||
|
||||
webpack.config.js
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/ja')
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
|
||||
'element-plus/lib/locale/lang/ja',
|
||||
),
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## `vue-i18n@5.x` との互換性
|
||||
### `vue-i18n@9.x` との互換性
|
||||
|
||||
Element [vue-i18n@5.x](https://github.com/kazupon/vue-i18n) は互換性があり、 多言語切り替えをより簡単に出来ます。
|
||||
Element [vue-i18n@9.x](https://vue-i18n-next.intlify.dev/guide/#html) は互換性があり、 多言語切り替えをより簡単に出来ます。
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
Need translation
|
||||
|
||||
If you need to check out [VueI18n documentation](https://vue-i18n-next.intlify.dev/guide/#html), please click this link to check it out.
|
||||
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
Vue.use(VueI18n)
|
||||
|
||||
Vue.config.lang = 'zh-cn'
|
||||
Vue.locale('zh-cn', zhLocale)
|
||||
Vue.locale('en', enLocale)
|
||||
```
|
||||
|
||||
## 他のi18nプラグインとの互換性
|
||||
Elementはvue-i18n以外のi18nプラグインとは互換性がないかもしれませんが、Elementがどのようにi18nを処理するかをカスタマイズすることができます。
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(ElementPlus, {
|
||||
i18n: function (path, options) {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## `vue-i18n@6.x` との互換性
|
||||
|
||||
`6.x`との互換性を保つためには、手動で処理する必要があります。
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale // Or use `Object.assign({ message: 'hello' }, enLocale)`
|
||||
[enLocale.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: enLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale // Or use `Object.assign({ message: '你好' }, zhLocale)`
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
Vue.use(ElementPlus, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(ElementPlus, {
|
||||
i18n: i18n.global.t,
|
||||
})
|
||||
|
||||
new Vue({ i18n }).$mount('#app')
|
||||
// Remember to use this plugin.
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## オンデマンドコンポーネントのカスタムi18n
|
||||
### 他の i18n プラグインとの互換性
|
||||
|
||||
```js
|
||||
Element は vue-i18n 以外の i18n プラグインとは互換性がないかもしれませんが、Element がどのように i18n を処理するかをカスタマイズすることができます。
|
||||
|
||||
Need translation
|
||||
|
||||
:::tip
|
||||
Once you set this method, the internal translation function will be invalid, only the customized translation method will be used, be sure that your custom translation method can translate format like `el.scope.subName`, other wise the internal translation string will be raw string.
|
||||
:::
|
||||
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import DatePicker from 'element/lib/date-picker'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
// The is the signature of i18n method.
|
||||
type i18n = (...args: any[]) => string
|
||||
Vue.use(Element, {
|
||||
i18n: function(path, options) {
|
||||
// ...
|
||||
},
|
||||
// others.
|
||||
})
|
||||
```
|
||||
|
||||
### オンデマンドコンポーネントのカスタム i18n
|
||||
|
||||
If you need to know how to lazy loading translation strings, please check this out[Lazy loading](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html)
|
||||
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import ElementLocale from 'element-plus/lib/locale'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(DatePicker)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale
|
||||
[enLocale.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: enLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang, the definition of fallbackLocale is below 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
ElementLocale.i18n(i18n.global.t)
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## CDNを経由してインポート
|
||||
### CDN を経由してインポート
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
@ -184,12 +215,42 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
Vue.locale('en', ELEMENT.lang.en)
|
||||
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
|
||||
// need translation
|
||||
const i18n = Vue18n.createI18n({
|
||||
locale: Element.lang.zhCN.name,
|
||||
fallbackLocale: Element.lang.en.name,
|
||||
messages: {
|
||||
[ELEMENT.lang.en.name]: {
|
||||
// el property is critical, set this in order for ElementPlus translate strings correctly.
|
||||
el: ELEMENT.lang.en.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[ELEMENT.lang.zhCN.name]: {
|
||||
el: ELEMENT.lang.zhCN.el,
|
||||
// Define your own dictionary with your own namespace, but DO NOT use the namespace `el`,
|
||||
// Because that makes the ElementPlus internal translation invalid.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// No message translations, it will fallback to en lang.
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const app = Vue.createApp()
|
||||
app.use(i18n)
|
||||
</script>
|
||||
```
|
||||
|
||||
現在、Element Plusは以下の言語をフォローしています。:
|
||||
現在、Element Plus は以下の言語をフォローしています。:
|
||||
|
||||
<ul class="language-list">
|
||||
<li>Simplified Chinese (zh-cn)</li>
|
||||
<li>English (en)</li>
|
||||
|
||||
@ -33,7 +33,8 @@ Vue.component(ElSelect.name, ElSelect)
|
||||
### 设置 Day.js 国际化
|
||||
|
||||
Element Plus 直接使用了 [Day.js](https://day.js.org/) 项目的时间日期国际化设置，如月份名称、每周第一天是周几等。并且会自动全局设置已经导入的 Day.js 国际化配置。
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
import locale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import 'dayjs/locale/zh-cn'
|
||||
|
||||
@ -43,7 +44,7 @@ app.use(ElementPlus, { locale })
|
||||
|
||||
当然，如果有需要，你也可以手动设置成其他 Day.js 国际化配置
|
||||
|
||||
```javascript
|
||||
```typescript
|
||||
import 'dayjs/locale/fr'
|
||||
dayjs.locale('fr')
|
||||
```
|
||||
@ -51,121 +52,140 @@ dayjs.locale('fr')
|
||||
如果使用其它语言，默认情况下英文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。
|
||||
|
||||
**webpack.config.js**
|
||||
```javascript
|
||||
|
||||
```typescript
|
||||
{
|
||||
plugins: [
|
||||
new webpack.NormalModuleReplacementPlugin(/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/, 'element-plus/lib/locale/lang/zh-cn')
|
||||
new webpack.NormalModuleReplacementPlugin(
|
||||
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
|
||||
'element-plus/lib/locale/lang/zh-cn',
|
||||
),
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 兼容 `vue-i18n@5.x`
|
||||
### 兼容 `vue-i18n@9.x`
|
||||
|
||||
Element Plus 兼容 [vue-i18n@5.x](https://github.com/kazupon/vue-i18n)，搭配使用能更方便地实现多语言切换。
|
||||
如果需要查看 [VueI18n的文档](https://vue-i18n-next.intlify.dev/guide/#html), 请点击这个链接去查看
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(ElementPlus)
|
||||
Vue.use(VueI18n)
|
||||
|
||||
Vue.config.lang = 'zh-cn'
|
||||
Vue.locale('zh-cn', zhLocale)
|
||||
Vue.locale('en', enLocale)
|
||||
```
|
||||
|
||||
## 兼容其他 i18n 插件
|
||||
如果不使用 `vue-i18n@5.x`，而是用其他的 i18n 插件，Element Plus 将无法兼容，但是可以自定义 Element Plus 的 i18n 的处理方法。
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: function (path, options) {
|
||||
// ...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 兼容 `vue-i18n@6.x`
|
||||
|
||||
默认不支持 6.x 的 `vue-i18n`，你需要手动处理。
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
|
||||
[enLocale.name]: {
|
||||
// el 这个属性很关键，一定要保证有这个属性，
|
||||
el: enLocale.el,
|
||||
// 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// 没有定义 message 字段，会 fallback 回到 en 去, fallbackLocale 的定义在下方 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
Vue.use(Element, {
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(ElementPlus, {
|
||||
i18n: i18n.global.t,
|
||||
})
|
||||
|
||||
new Vue({ i18n }).$mount('#app')
|
||||
// 要记得使用这个插件.
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## 按需加载里定制 i18n
|
||||
### 兼容其他 i18n 插件
|
||||
|
||||
```js
|
||||
如果不使用 `vue-i18n@9.x`，而是用其他的 i18n 插件，Element Plus 将无法兼容，但是可以自定义 Element Plus 的 i18n 的处理方法。
|
||||
|
||||
:::tip
|
||||
一旦设置了这个方法，ElementPlus 内置的翻译功能就会失效，会使用用户定义的翻译功能，所以一定要确保翻译方法能够正确的翻译 `el.scope.subName` 的格式，如果自定义的方法无法翻译 `el.select.noData` 的格式，将会使组件的文本失效.
|
||||
:::
|
||||
|
||||
```typescript
|
||||
import Vue from 'vue'
|
||||
import DatePicker from 'element/lib/date-picker'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
|
||||
// 这是 i18n 函数的函数签名.
|
||||
type i18n = (...args: any[]) => string
|
||||
Vue.use(Element, {
|
||||
i18n: function(path, options) {
|
||||
// ...
|
||||
},
|
||||
// others.
|
||||
})
|
||||
```
|
||||
|
||||
### 按需加载里定制 i18n
|
||||
|
||||
如果您需要按需加载翻译文件，请查看[按需加载](https://vue-i18n-next.intlify.dev/guide/advanced/lazy.html)
|
||||
|
||||
```typescript
|
||||
import { createApp } from 'vue'
|
||||
import { createI18n } from 'vue-i18n'
|
||||
import ElementPlus from 'element-plus'
|
||||
import enLocale from 'element-plus/lib/locale/lang/en'
|
||||
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
|
||||
import ElementLocale from 'element-plus/lib/locale'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
Vue.use(DatePicker)
|
||||
import App from './App.vue'
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
message: 'hello',
|
||||
...enLocale
|
||||
[enLocale.name]: {
|
||||
// el 这个属性很关键，一定要保证有这个属性，
|
||||
el: enLocale.el,
|
||||
// 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[zhLocale.name]: {
|
||||
el: zhLocale.el,
|
||||
// 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// 没有定义 message 字段，会 fallback 回到 en 去, fallbackLocale 的定义在下方 👇
|
||||
},
|
||||
zh: {
|
||||
message: '你好',
|
||||
...zhLocale
|
||||
}
|
||||
}
|
||||
// Create VueI18n instance with options
|
||||
const i18n = new VueI18n({
|
||||
locale: 'en', // set locale
|
||||
messages, // set locale messages
|
||||
|
||||
const i18n = createI18n({
|
||||
locale: zhLocale.name,
|
||||
fallbackLocale: enLocale.name,
|
||||
messages,
|
||||
})
|
||||
|
||||
ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
ElementLocale.i18n(i18n.global.t)
|
||||
|
||||
const app = createApp(App)
|
||||
app.use(i18n)
|
||||
```
|
||||
|
||||
## 通过 CDN 的方式加载语言文件
|
||||
### 通过 CDN 的方式加载语言文件
|
||||
|
||||
```html
|
||||
<script src="//unpkg.com/vue"></script>
|
||||
@ -188,12 +208,39 @@ ElementLocale.i18n((key, value) => i18n.t(key, value))
|
||||
<script src="//unpkg.com/element-plus/lib/umd/locale/en.js"></script>
|
||||
|
||||
<script>
|
||||
Vue.locale('en', ELEMENT.lang.en)
|
||||
Vue.locale('zh-cn', ELEMENT.lang.zhCN)
|
||||
const i18n = Vue18n.createI18n({
|
||||
locale: Element.lang.zhCN.name,
|
||||
fallbackLocale: Element.lang.en.name,
|
||||
messages: {
|
||||
[ELEMENT.lang.en.name]: {
|
||||
// el 这个属性很关键，一定要保证有这个属性，
|
||||
el: ELEMENT.lang.en.el,
|
||||
// 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
|
||||
message: {
|
||||
hello: 'hello world',
|
||||
},
|
||||
},
|
||||
[ELEMENT.lang.zhCN.name]: {
|
||||
el: ELEMENT.lang.zhCN.el,
|
||||
// 定义您自己的字典，但是请不要和 `el` 重复，这样会导致 ElementPlus 内部组件的翻译失效.
|
||||
message: {
|
||||
hello: '你好，世界',
|
||||
},
|
||||
},
|
||||
testLocale: {
|
||||
el: {},
|
||||
// 没有定义 message 字段，会 fallback 回到 en 去.
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const app = Vue.createApp()
|
||||
app.use(i18n)
|
||||
</script>
|
||||
```
|
||||
|
||||
目前 Element Plus 内置了以下语言：
|
||||
|
||||
<ul class="language-list">
|
||||
<li>简体中文（zh-cn）</li>
|
||||
<li>英语（en）</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user