vue3中的elementPlus全局組件中文轉換方式

Posted on by

elementPlus 全局組件中文轉換

在項目中使用日期下拉框發現是英文的，需要全局改成中文樣式。

代碼實現

在 App.vue 的文件中修改即可。

代碼如下

<template>
    <el-config-provider :locale="locale">
      <router-view></router-view>
    </el-config-provider>
</template>
<script lang="ts" setup>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn';

const { locale } = reactive({
  locale: zhCn,
});

</script>

參考官方鏈接：https://element-plus.org/en-US/guide/i18n.html#configprovider

elementPlus 設置默認語言為中文

Element UI的默認語言是英文。那麼如何才能將其改成中文呢？

ElementUI 提供瞭國際化的支持，這裡給出其中的一個改成中文的方法。

找到main.js 文件, 做如下改動：

import {createApp} from 'vue'
import ElementPlus from 'element-plus';
import locale from "element-plus/lib/locale/lang/zh-cn";//需要新加的代碼
import App from './App.vue'
import "element-plus/lib/theme-chalk/index.css";
 
let app = createApp(App);
app.use(ElementPlus, {locale});//需要改變的地方，加入locale
app.mount('#app');

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：