ElementPlus Config Provider

Config Provider 被用来提供全局的配置选项，让你的配置能够在全局都能够被访问到，Config Provider 使用了 Vue 的 provide/inject 特性

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script>
  import { defineComponent } from vue
  import { ElConfigProvider } from element-plus

  import zhCn from element-plus/lib/locale/lang/zh-cn

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
</script>

代码演示

<template>
  <div>
  <el-config-provider :locale="locale1">
    <div style="">
      <el-empty />
    </div>
    <div style="">
      <el-transfer />
    </div>
  </el-config-provider>
  <el-button @click="toggle" style="">
    切换语言
  </el-button>
</div>
</template>

<script>
  import { ref } from vue
  // import { ConfigProvider } from element-plus
  export default {
    setup() {
      const locale1 = ref({
        name: zh-cn,
        el: {
          table: {
            emptyText: 无数据,
          },
          transfer: {
            titles: [列表1, 列表2],
            noData: 无数据,
          },
        },
      })
      const locale2 = ref({
        name: en,
        el: {
          table: {
            emptyText: no data,
          },
          transfer: {
            titles: [list 1, list 2],
            noData: no data,
          },
        },
      })
      const toggle = () => {
        const temp = locale1.value
        locale1.value = locale2.value
        locale2.value = temp
      }
      return {
        locale1,
        locale2,
        toggle,
      }
    },
  }
</script>

ConfigProvider 属性