vue3 element-plus默认组件修改为中文

背景:Element-plus默认使用英文组件

环境:
Vue:3.2.31
Element-Plus:2.0.3
TypeScript:4.4.3
Vite:2.8.1

两种修改方法:

1.全局修改
在main.ts中添加

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

const app = createApp(App)
  .use(ElementPlus, {
    locale: zhCn
  })

2.局部引用

<script setup lang="ts">
import zhCn from "element-plus/lib/locale/lang/zh-cn";
let locale = zhCn;
</script>
<template>
  <el-config-provider :locale="locale">
    <slot name="app">
    编辑你的内容
    </slot>
  </el-config-provider>
</template>

另一种写法

<template>
  <el-config-provider :locale="locale">
    <slot name="app"></slot>
  </el-config-provider>
</template>
<script>
//引入vue方法
import { ElConfigProvider } from 'element-plus'
//中文包
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
//引入自定义方法
//引入自定义组件
export default {
  name: 'test',
  setup() {
    let locale = zhCn
    return {
      locale
    }
  }
}
</script>

你可能感兴趣的:(vue,vue)