element学习——el-config-provider(切换系统语言)

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

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

app.vue



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

el-config-provider

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

然后,它的属性有locale

参数 说明 类型 可选值 默认值
locale 翻译文本对象 Object 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)
  }
}

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

你可能感兴趣的:(学习,vue.js,elementui)