代码时候,在app.vue面经看到elconfigprovider这个组件,之前都没有思考是用来干啥的,毕竟我也不怎么接触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,并且 elconfig-provider里面有locale这个属性,所以去学习了这个组件

elconfig-provider

首先,el-config-provider被用来提供全局配置选项,让配置能够在全局都能够被访问到,Config Provider使用vueprovide/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)
  }
}

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

原文地址:https://blog.csdn.net/ParkChanyelo/article/details/127012244

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_26300.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注