乐趣区

关于vue.js:ElementPlus国际化配置的正确打开方式

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

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

app.use(ElementPlus, {locale: zhCn,})

我寻思,这玩意必定不会动态变化啊。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>

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

退出移动版