vue3中Element Plus全局組件配置中文的兩種方案

更新時(shí)間：2023年12月12日 15:56:02 作者：鄒榮樂(lè)

element-plus組件文字語(yǔ)言默認(rèn)是英文,需要手動(dòng)更改一下中文包 ,本文主要介紹了vue3中Element Plus全局組件配置中文的兩種方案,具有一定的參考價(jià)值,感興趣的可以了解一下

1.在 App.vue 的文件中修改

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

<script setup>
// // 引入配置組件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
 
const { locale } = reactive({
  locale: zhCn,
});
</script>

2.在main.js的文件中修改

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

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

國(guó)際化

Element Plus 還提供了一個(gè) Vue 組件 ConfigProvider 用于全局配置國(guó)際化的設(shè)置。

<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/dist/locale/zh-cn.mjs'

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
</script>

到此這篇關(guān)于vue3中Element Plus全局組件配置中文的兩種方案的文章就介紹到這了,更多相關(guān)Element Plus全局組件配置中文內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

分享一個(gè)常用的javascript靜態(tài)類
這篇文章主要分享一個(gè)常用的javascript靜態(tài)類，筆者自己寫的,需要的朋友可以參考下
2014-12-12
xml 與javascript結(jié)合的問(wèn)題解決方法
xml 與javascript結(jié)合的問(wèn)題解決方法...
2007-03-03
JS+JSP通過(guò)img標(biāo)簽調(diào)用實(shí)現(xiàn)靜態(tài)頁(yè)面訪問(wèn)次數(shù)統(tǒng)計(jì)的方法
這篇文章主要介紹了JS+JSP通過(guò)img標(biāo)簽調(diào)用實(shí)現(xiàn)靜態(tài)頁(yè)面訪問(wèn)次數(shù)統(tǒng)計(jì)的方法,基于JavaScript動(dòng)態(tài)調(diào)用jsp頁(yè)面通過(guò)對(duì)TXT文本文件的讀寫實(shí)現(xiàn)統(tǒng)計(jì)訪問(wèn)次數(shù)的功能,需要的朋友可以參考下
2015-12-12
js實(shí)現(xiàn)數(shù)字滾動(dòng)特效
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)數(shù)字滾動(dòng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
通過(guò)實(shí)例了解JS執(zhí)行上下文運(yùn)行原理
這篇文章主要介紹了通過(guò)實(shí)例了解JS執(zhí)行上下文運(yùn)行原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
JavaScript詳解類數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理
這篇文章主要介紹了JavaScript詳解類數(shù)組與可迭代對(duì)象的實(shí)現(xiàn)原理，ES6中引入了迭代器與可迭代對(duì)象的概念，并且提供了對(duì)可迭代對(duì)象的相關(guān)支持，如for...of循環(huán)，Map(iterable)構(gòu)造器，展開語(yǔ)法...等。讓我們對(duì)數(shù)組外的數(shù)據(jù)集合的遍歷操作也得到極大簡(jiǎn)化
2022-06-06
JavaScript學(xué)習(xí)點(diǎn)滴 call、apply的區(qū)別
對(duì)于apply和call兩者在作用上是相同的，但兩者在參數(shù)上有區(qū)別的。
2010-10-10
JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)滑動(dòng)切換tab菜單效果,涉及javascript鼠標(biāo)事件及頁(yè)面元素樣式的動(dòng)態(tài)切換效果實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-08-08
JavaScript Cookie的讀取和寫入函數(shù)
Cookie的讀取和寫入實(shí)現(xiàn)函數(shù)。
2009-12-12
Ajax實(shí)現(xiàn)不刷新取最新商品
本文主要介紹了Ajax 實(shí)現(xiàn)不刷新取最新商品的方法。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-03-03