element学习——el-config-provider（切换系统语言）

写代码的时候，在app.vue里面经常看到el-config-provider这个组件，之前都没有思考是用来干啥的，毕竟我也不怎么接触app.vue这个文件，平时都是写几个简单界面。

这次是因为leader新开的项目，里面有用到一些别人的框架，实际还是vue，然后里面有一个切换语言的功能，之前也是看到过，但是没有细究，这次仔细看了看，就看到app.vue里面引用了中文语言，如下：

app.vue

<template>
  <el-config-provider :locale="locale" namespace="el" size="small">
    <router-view />
  </el-config-provider>
</template>
<script setup>
import { setToken } from '@/utils/auth'
import { useAppStore } from '@/store/app'

import zhCn from 'element-plus/lib/locale/lang/zh-cn'
let locale = $ref(zhCn) //中文

// import en from 'element-plus/lib/locale/lang/en'
// let locale = $ref(en) //english

const appStore = useAppStore()
const settings = computed(() => {
  return appStore.settings
})
onBeforeMount(() => {
  //set tmp token when setting isNeedLogin false
  if (!settings.value.isNeedLogin) setToken(settings.value.tmpToken)
})
</script>

引用中文后，将其命名为locale，并且 el-config-provider里面有locale这个属性，所以去学习了这个组件。

el-config-provider

首先，el-config-provider被用来提供全局的配置选项，让配置能够在全局都能够被访问到，Config Provider使用了vue的provide/inject特性.

然后，它的属性有locale

参数	说明	类型	可选值	默认值
locale	翻译文本对象	Object<Language>	languages	English

那看到这里就明白了，只能切换语言。

除此之外，我还看了vue里的Provide / Inject。

下面是文档里的解释：

插件中的 Provide / Inject#

在插件中，我们可以通过 provide 来为插件用户供给一些内容。举例来说，我们可以将插件接收到的 options 参数提供给整个应用，让任何组件都能使用这个翻译字典对象。

js

// plugins/i18n.js
export default {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }

    app.provide('i18n', options)
  }
}

现在，插件用户就可以在他们的组件中以 i18n 为 key 注入并访问插件的选项对象了。

js

export default {
  inject: ['i18n'],
  created() {
    console.log(this.i18n.greetings.hello)
  }
}

不过我并没有试过，等下次试过，我再来继续记录。