vue3 + element-plus组件的国际化_element plus国际化

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

这下子就可以了