当前位置:   article > 正文

element-plus 组件库语言切换_import zhcn from 'element-plus/dist/locale/zh-cn.m

import zhcn from 'element-plus/dist/locale/zh-cn.mjs

引言

element-plus 组件库默认使用 英文,因此当需要切换成中文,就需要对组件库进行语言配置

1.全局配置

element-plus 使用的是全局导入的话,使用下面方法进行语言切换

import ElementPlus from 'element-plus'
// 中文文件
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

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

2.按需导入

element-plus 使用的是按需导入的话,使用下面方法进行语言切换

// App.vue
<template>
  <div id="app">
  	// el-config-provider 是 element-plus 提供用于全局配置国际化
    <el-config-provider :locale="locale">
      <router-view />
    </el-config-provider>
  </div>
</template>

<script setup lang="ts">
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
const locale = zhCn;
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

注意事项

项目如果使用的是 ts,则需要对 'element-plus/dist/locale/zh-cn.mjs' 进行声明

在项目的 .d.ts 文件中输入 declare module 'element-plus/dist/locale/zh-cn.mjs';
  • 1
  • 2
  • 3

element-plus 完成以上配置,组件库语言切换成中文

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/119132
推荐阅读
相关标签
  

闽ICP备14008679号