vue 3使用Element Plus组件默认英文改为中文

Element Plus 组件 默认 使用英语，现修改为中文

全局配置

Element Plus 提供了全局配置国际化的配置。

在main.ts中添加代码

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

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

ConfigProvider

Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。

在App.vue添加

<template>
  <el-config-provider :locale="zhCn">
    <app />
  </el-config-provider>
</template>

<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

export default {
  setup () {
    const zhCn = lang;
    const scaleva = ref()
    const bodyScale = () => {
      const devicewidth = document.documentElement.clientWidth// 获取当前分辨率下的可是区域宽度
      const scale = devicewidth / 1920 // 分母——设计稿的尺寸
      scaleva.value = scale
    }
    onMounted(() => {
      bodyScale()
      window.onresize = () => {
        return (() => {
          bodyScale()
        })()
      }
    })
    return {
      scaleva,
      zhCn
    }
  }
}
</script>

日期和时间本地化

我们使用 Day.js 库来管理组件的日期和时间，例如 DatePicker。 必须在 Day.js 中设置一个适当的区域，以便使国际化充分发挥作用。 您必须分开导入Day.js的区域设置。

import 'dayjs/locale/zh-cn'

CDN 用法

如果通过 CDN 使用 Element Plus ，那么你需要添加以下代码，以下是使用 unpkg 的示例

<script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
<script>
  app.use(ElementPlus, {
    locale: ElementPlusLocaleZhCn,
  })
</script>

可参考国际化 | Element Plus