vue3 + element-plus组件的国际化
1、首先官网是这样说明的:vue版本:3.2.26element-plus版本:1.2.0-beta.6然后我在main.js中也这样写了于是乎在项目没生效我只能说官方的文档能不能细心点~~·2、使用ElConfigProvider全局配置组件在app.vue中使用组件<template><el-config-provider :locale="locale"><ro
·
1、首先官网是这样说明的:
vue版本:3.2.26
element-plus版本:1.2.0-beta.6
然后我在main.js中也这样写了
于是乎在项目没生效
我只能说官方的文档能不能细心点~~·
2、使用ElConfigProvider全局配置组件
在app.vue中使用组件
<template>
<el-config-provider :locale="locale">
<router-view />
</el-config-provider>
</template>
<script>
import {ref, watch, computed} from 'vue'
import {useStore} from 'vuex'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import enLocale from 'element-plus/lib/locale/lang/en'
import {observeSwitchLang} from './utils/i18n'
import {GET_USER_INFO, WINDOW_WIDTH, HANDLE_COLLAPSE} from './utils/constant'
import {generateNewStyles, appendStyles} from './utils/theme'
import useWindowSize from './hooks/useWindowSize'
export default {
setup() {
const locale = ref(zhLocale)
const store = useStore()
const {width} = useWindowSize()
const lang = computed(() => store.getters.language)
/* 处理刷新后主题色重置的问题 */
generateNewStyles(store.getters.themeColor)
.then(newStyle => appendStyles(newStyle))
watch(width, newWidth => {
if (newWidth <= WINDOW_WIDTH) {
store.commit(HANDLE_COLLAPSE, false)
} else {
store.commit(HANDLE_COLLAPSE, true)
}
})
watch(lang, newLang => {
locale.value = newLang === 'zh' ? zhLocale : enLocale
})
observeSwitchLang(() => {
store.getters.token && store.dispatch(GET_USER_INFO)
})
return {locale}
}
}
</script>
这下子就可以了
更多推荐
已为社区贡献16条内容
所有评论(0)