ConfigProvider Component
ConfigProvider provides global configurations accessible throughout the application.
When to Use
- Internationalization
- Global component size
- Theme configuration
- Component defaults
i18n Configuration
<template>
<el-config-provider :locale="locale">
<App />
</el-config-provider>
</template>
<script setup>
import { ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const locale = ref(zhCn)
</script>
Global Size
<template>
<el-config-provider size="small">
<App />
</el-config-provider>
</template>
Button Configuration
<template>
<el-config-provider :button="{ autoInsertSpace: true, type: 'primary' }">
<App />
</el-config-provider>
</template>
Message Configuration
<template>
<el-config-provider :message="{ max: 3 }">
<App />
</el-config-provider>
</template>
Empty Values Configuration
<template>
<el-config-provider
:empty-values="[null, undefined]"
:value-on-clear="null"
>
<App />
</el-config-provider>
</template>
API Reference
Attributes
| Name |
Description |
Type |
Default |
| locale |
Locale object |
{ name: string, el: TranslatePair } |
English |
| size |
Global component size |
'large' | 'default' | 'small' |
'default' |
| zIndex |
Initial zIndex |
number |
— |
| namespace |
Component class prefix |
string |
'el' |
| button |
Button configuration |
{ autoInsertSpace?, type?, plain?, text?, round?, dashed? } |
— |
| link |
Link configuration |
{ type?, underline? } |
— |
| dialog |
Dialog configuration |
{ alignCenter?, draggable?, overflow?, transition? } |
— |
| message |
Message configuration |
{ max?, grouping?, duration?, showClose?, offset?, plain?, placement? } |
— |
| table |
Table configuration |
{ showOverflowTooltip?, tooltipEffect?, tooltipOptions?, tooltipFormatter? } |
— |
| empty-values |
Empty values for components |
array |
['', null, undefined] |
| value-on-clear |
Value when cleared |
string | number | boolean | Function |
undefined |
Slots
| Name |
Description |
Type |
| default |
Default content |
{ config } |
Best Practices
- Use for global i18n configuration
- Set
size for consistent component sizing
- Use
empty-values for form handling
1---2name: el-config-provider3description: ConfigProvider component for global configuration. Invoke when user needs to configure global settings, i18n, theme, or component defaults.4---5
6# ConfigProvider Component
7
8ConfigProvider provides global configurations accessible throughout the application.
9
10## When to Use
11
12- Internationalization
13- Global component size
14- Theme configuration
15- Component defaults
16
17## i18n Configuration
18
19```vue
20<template>
21 <el-config-provider :locale="locale">
22 <App />
23 </el-config-provider>
24</template>
25
26<script setup>
27import { ref } from 'vue'
28import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
29
30const locale = ref(zhCn)
31</script>
32```
33
34## Global Size
35
36```vue
37<template>
38 <el-config-provider size="small">
39 <App />
40 </el-config-provider>
41</template>
42```
43
44## Button Configuration
45
46```vue
47<template>
48 <el-config-provider :button="{ autoInsertSpace: true, type: 'primary' }">
49 <App />
50 </el-config-provider>
51</template>
52```
53
54## Message Configuration
55
56```vue
57<template>
58 <el-config-provider :message="{ max: 3 }">
59 <App />
60 </el-config-provider>
61</template>
62```
63
64## Empty Values Configuration
65
66```vue
67<template>
68 <el-config-provider
69 :empty-values="[null, undefined]"
70 :value-on-clear="null"
71 >
72 <App />
73 </el-config-provider>
74</template>
75```
76
77## API Reference
78
79### Attributes
80
81| Name | Description | Type | Default |
82|------|-------------|------|---------|
83| locale | Locale object | `{ name: string, el: TranslatePair }` | English |
84| size | Global component size | `'large' \| 'default' \| 'small'` | `'default'` |
85| zIndex | Initial zIndex | `number` | — |
86| namespace | Component class prefix | `string` | `'el'` |
87| button | Button configuration | `{ autoInsertSpace?, type?, plain?, text?, round?, dashed? }` | — |
88| link | Link configuration | `{ type?, underline? }` | — |
89| dialog | Dialog configuration | `{ alignCenter?, draggable?, overflow?, transition? }` | — |
90| message | Message configuration | `{ max?, grouping?, duration?, showClose?, offset?, plain?, placement? }` | — |
91| table | Table configuration | `{ showOverflowTooltip?, tooltipEffect?, tooltipOptions?, tooltipFormatter? }` | — |
92| empty-values | Empty values for components | `array` | `['', null, undefined]` |
93| value-on-clear | Value when cleared | `string \| number \| boolean \| Function` | `undefined` |
94
95### Slots
96
97| Name | Description | Type |
98|------|-------------|------|
99| default | Default content | `{ config }` |
100
101## Best Practices
102
1031. Use for global i18n configuration
1042. Set `size` for consistent component sizing
1053. Use `empty-values` for form handling
jiaiyan