2021-07-26 00:24:30 +08:00
## Config Provider
Config Provider is used for providing global configurations, which enables your entire application to access these configurations everywhere
### i18n related configurations
Configure i18n related properties via Config Provider, to get language switching feature
:::demo Use two attributes to provide i18n related config
```html
< div >
< el-config-provider :locale = "locale1" >
2021-07-26 19:58:19 +08:00
< el-color-picker :modelValue = "''" style = "vertical-align: middle;" / >
2021-07-26 00:24:30 +08:00
< / el-config-provider >
< el-button @click =" toggle " style = "margin-left: 8px; vertical-align: middle;" >
Switch Lang
< / el-button >
< / div >
< script >
// import { ConfigProvider } from 'element-plus'
export default {
data() {
return {
locale1: {
name: 'fr',
el: {
colorpicker: {
confirm: 'OK',
clear: 'Effacer',
},
2021-07-26 19:58:19 +08:00
},
2021-07-26 00:24:30 +08:00
},
locale2: {
name: 'en',
el: {
colorpicker: {
confirm: 'Confirm',
clear: 'Clear',
},
2021-07-26 19:58:19 +08:00
},
},
2021-07-26 00:24:30 +08:00
}
},
methods: {
toggle() {
const temp = this.locale1
this.locale1 = this.locale2
this.locale2 = temp
2021-07-26 19:58:19 +08:00
},
},
2021-07-26 00:24:30 +08:00
}
< / script >
```
:::
### ConfigProvider Attributes
2021-07-26 19:58:19 +08:00
| Attribute | Description | Type | Accepted Values | Default |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ | --------------------------------------------------------------------------------------- | ------- |
| locale | Locale Object | Object\<Language\> | [languages ](https://github.com/element-plus/element-plus/tree/dev/packages/locale/lang ) | English |
| i18n | External translator, when this attribute is provided, it will be used at first, and it will fallback to default translator when this method returns nullish value | Function\<(...args: []) =\> string\> | - | - |