写代码的时候,在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 | 翻译文本对象 | Object<Language> | languages | English |
除此之外,我还看了vue里的Provide / Inject。
插件中的 Provide / Inject#
在插件中,我们可以通过 provide
来为插件用户供给一些内容。举例来说,我们可以将插件接收到的 options
参数提供给整个应用,让任何组件都能使用这个翻译字典对象。
// 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 注入并访问插件的选项对象了。
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进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。