Element-Plus国际化配置的正确打开方式_elementui plus时间国际化配置

最近有同学问我说，elementPlus做国际化配置，但是点击中英文切换按钮之后，对应组件的中英文没有做切换。原来他的代码是这么写的

import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

app.use(ElementPlus, {
  locale: zhCn,
})
1
2
3
4
5
6

我寻思，这玩意肯定不会动态变化啊。local都写成固定的了，切换语言怎么可能生效。
查了查文档，实际上人家element-plus团队都提供了一个全局的用法，只需要在app.vue文件里加这么几行代码就行了。

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ElConfigProvider } from 'element-plus'

  import zhCn from 'element-plus/lib/locale/lang/zh-cn'

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

中文的话，就使用中文的locale，英文的话，把locale的值改成对应英文的就好了~
点击切换按钮时进行响应赋值哈，这个一般都是结合i18n来使用，对应的切换语言操作就不赘述了。看文档还是要仔细一些，都写得很明白了其实。