Config Provider 全局配置

Config Provider 全局配置

Config Provider 被用来提供全局的配置选项，让你的配置能够在全局都能够被访问到。

i18n 配置

通过 Config Provider 来配置多语言，让你的应用可以随时切换语言。

使用两个属性来提供 i18n 相关配置

<template>
  <div>
    <el-button mb-2 @click="toggle">Switch Language</el-button>
    <br />
    <el-config-provider :locale="locale">
      <el-table mb-1 :data="[]" />
      <el-pagination :total="100" />
    </el-config-provider>
  </div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import en from 'element-plus/dist/locale/en.mjs'
const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))
const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}
</script>

对按钮进行配置

<template>
  <div>
    <div m="b-2">
      <el-checkbox v-model="config.autoInsertSpace"
        >autoInsertSpace</el-checkbox
      >
    </div>
    <el-config-provider :button="config">
      <el-button>中文</el-button>
    </el-config-provider>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
const config = reactive({
  autoInsertSpace: true,
})
</script>

对消息进行配置

<template>
  <div>
    <el-config-provider :message="config">
      <el-button @click="open">OPEN</el-button>
    </el-config-provider>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
const config = reactive({
  max: 3,
})
const open = () => {
  ElMessage('This is a message.')
}
</script>

实验性功能

在本节中，您可以学习如何使用 Config Provider 来提供实验性功能。现在，我们还没有添加任何实验性功能，但在未来的规划中，我们将添加一些实验性功能。您可以使用此配置来管理这些功能。

// TODO

Config Provider 属性

参数	说明	类型	可选值	默认值
locale	翻译文本对象	Language	languages	English
size	全局组件大小	string	large / default /small	default
zIndex	全局初始化 zIndex 的值	number	-	-
namespace	全局组件类名称前缀 (需要配合 $namespace 使用)	string	-	el
button	按钮相关的配置详细配置见下表	ButtonGlobalConfig	-	详见下表
message	消息相关配置，详见下表	MessageGlobalConfig	-	详见下表
experimental-features	将要添加的实验阶段的功能，所有功能都是默认设置为 false	Object	-	-