javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update i18n demo (#2672)

Browse Source
This commit is contained in:
iamkun
2021-07-26 00:40:37 +08:00
committed by GitHub
parent 4ae4f85b2f
commit bc6d4a18e0
5 changed files with 66 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
website/docs/en-US/i18n.md
View File

@@ -14,35 +14,29 @@ After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n funct
If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code.
```ts
```html
<template>
<el-config-provider :locale="locale">
<App />
</el-config-provider>
</template>
<script>
import { ConfigProvider } from 'element-plus'
import English from 'element-plus/lib/locale/en'
import fr from 'element-plus/lib/locale/fr'
defineComponent({
components: {
[ConfigProvider.name]: ConfigProvider,
}
template: `
<el-config-provider :locale="locale">
<slot />
</el-config-provider>
<button @click="toggle">Switch language</button>
`
},
data() {
return {
locale: English,
locale: fr,
}
},
methods: {
toggle() {
// You can change here to any language you want as long as we support them
this.locale = English
}
}
})
</script>
```
#### Useful links：
@@ -88,18 +82,18 @@ createApp(
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.
```typescript
import locale from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/fr'
import 'dayjs/locale/fr'
// will auto set Day.js locale to 'zh-cn'
// will auto set Day.js locale to 'fr'
app.use(ElementPlus, { locale })
```
However, you can use another Day.js locale if needed.
```typescript
import 'dayjs/locale/fr'
dayjs.locale('fr')
import 'dayjs/locale/es'
dayjs.locale('es')
```
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:
@@ -111,7 +105,7 @@ webpack.config.js
plugins: [
new webpack.NormalModuleReplacementPlugin(
/element-plus[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]en/,
'element-plus/lib/locale/lang/zh-cn',
'element-plus/lib/locale/lang/fr',
),
]
}

30
website/docs/es/i18n.md
View File

@@ -16,35 +16,29 @@ After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n funct
If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code.
```ts
```html
<template>
<el-config-provider :locale="locale">
<App />
</el-config-provider>
</template>
<script>
import { ConfigProvider } from 'element-plus'
import Español from 'element-plus/lib/locale/es'
import es from 'element-plus/lib/locale/es'
defineComponent({
components: {
[ConfigProvider.name]: ConfigProvider,
}
template: `
<el-config-provider :locale="locale">
<slot />
</el-config-provider>
<button @click="toggle">Switch language</button>
`
},
data() {
return {
locale: Español,
locale: es,
}
},
methods: {
toggle() {
// You can change here to any language you want as long as we support them
this.locale = Español
}
}
})
</script>
```
#### Useful links：

30
website/docs/fr-FR/i18n.md
View File

@@ -16,35 +16,29 @@ After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n funct
If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code.
```ts
```html
<template>
<el-config-provider :locale="locale">
<App />
</el-config-provider>
</template>
<script>
import { ConfigProvider } from 'element-plus'
import Français from 'element-plus/lib/locale/fr'
import en from 'element-plus/lib/locale/en'
defineComponent({
components: {
[ConfigProvider.name]: ConfigProvider,
}
template: `
<el-config-provider :locale="locale">
<slot />
</el-config-provider>
<button @click="toggle">Switch language</button>
`
},
data() {
return {
locale: Français,
locale: en,
}
},
methods: {
toggle() {
// You can change here to any language you want as long as we support them
this.locale = Français
}
}
})
</script>
```
#### Useful links：

30
website/docs/jp/i18n.md
View File

@@ -14,35 +14,29 @@ After `1.0.2-beta.59(included)`, we reorganized the code, making sure i18n funct
If your project is still using `Options API`, then we suggest you to use it this way, to reduce the mind burden. If you are using `Composition API` throughout your project, we still suggest you to use it this way since this allows you to write less code.
```ts
```html
<template>
<el-config-provider :locale="locale">
<App />
</el-config-provider>
</template>
<script>
import { ConfigProvider } from 'element-plus'
import 日本語 from 'element-plus/lib/locale/ja'
import ja from 'element-plus/lib/locale/ja'
defineComponent({
components: {
[ConfigProvider.name]: ConfigProvider,
}
template: `
<el-config-provider :locale="locale">
<slot />
</el-config-provider>
<button @click="toggle">Switch language</button>
`
},
data() {
return {
locale: 日本語,
locale: ja,
}
},
methods: {
toggle() {
// You can change here to any language you want as long as we support them
this.locale = 日本語
}
}
})
</script>
```
#### Useful links：

30
website/docs/zh-CN/i18n.md
View File

@@ -13,35 +13,29 @@ Element Plus 组件内部默认使用英语，若希望使用其他语言，则
#### 1. 通过 ConfigProvider 的方式来使用，详细的使用方法请查阅 ConfigProvider 的文档
如果你的项目中还在使用 `options API`, 那么你应该使用此方法，我们更加建议用户使用该方法，因为这样会减少使用的负担，但如果你在项目中深度使用 `Composition API`，那么你可以使用第二种方法来为整个应用提供语言支持。
```ts
```html
<template>
<el-config-provider :locale="locale">
<App />
</el-config-provider>
</template>
<script>
import { ConfigProvider } from 'element-plus'
import Chinese from 'element-plus/lib/locale/zh-cn'
import zhCn from 'element-plus/lib/locale/zh-cn'
defineComponent({
components: {
[ConfigProvider.name]: ConfigProvider,
}
template: `
<el-config-provider :locale="locale">
<slot />
</el-config-provider>
<button @click="toggle">切换语言</button>
`
},
data() {
return {
locale: Chinese,
locale: zhCn,
}
},
methods: {
toggle() {
// 你可以把这里的 locale 赋值为任何支持的语言，
this.locale = Chinese
}
}
})
</script>
```
#### 有用的链接：