element-plus/website/docs/zh-CN/config-provider.md
2021-07-26 19:58:19 +08:00

2.3 KiB

Config Provider

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

国际化相关配置

通过 Config Provider 来配置国际化相关的服务,能让你的应用完成语言切换和获取。

:::demo 通过两个属性来提供国际化相关的语言配置

<div>
  <el-config-provider :locale="locale1">
    <el-color-picker :modelValue="''" style="vertical-align: middle;" />
  </el-config-provider>
  <el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
    切换语言
  </el-button>
</div>

<script>
  // import { ConfigProvider } from 'element-plus'
  export default {
    data() {
      return {
        locale1: {
          name: 'zh-cn',
          el: {
            colorpicker: {
              confirm: '确定',
              clear: '清空',
            },
          },
        },
        locale2: {
          name: 'en',
          el: {
            colorpicker: {
              confirm: 'Confirm',
              clear: 'Clear',
            },
          },
        },
      }
    },
    methods: {
      toggle() {
        const temp = this.locale1
        this.locale1 = this.locale2
        this.locale2 = temp
      },
    },
  }
</script>

:::

ConfigProvider 属性

参数 说明 类型 可选值 默认值
locale 翻译文本对象 Object<Language> languages English
i18n 外部的翻译方法,当该方法被提供时,会优先使用该方法进行翻译的操作,若返回空值便会落回到自带翻译方法 Function<(...args: []) => string> - -