element plus 语言切换组件使用
背景:现在的很多网站要求支持多种语言切换需求,element plus 正好有这种组件可以满足这种需求。
使用element plus的效果
1、介绍组件的引用
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
locale: zhCn,
})
2、在全局中引用
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
locale: zhCn,
})
Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。
import { ElConfigProvider } from 'element-plus'
<el-config-provider :locale="locale">
<div id="app">
<router-view></router-view>
</div>
</el-config-provider>
const locale = computed(() => {
const langState = store.getters['settingsModule/getLangState']
const local = langState === '/zh-CN' ? zhLocale : enLocale
return local
})
3、要注意的地方是namespace参数,因为默认情况下只会对前缀是el的进行国际化转换。(因此这种方式只是局部的国际化)