Vue3项目之ElementPlus 配置国际化

cocoonne

已于 2023-02-23 22:27:30 修改

阅读量1.4k

点赞数 1

文章标签： vue.js javascript 前端

于 2023-02-23 22:25:28 首次发布

本文链接：https://blog.csdn.net/m0_63907100/article/details/129191577

版权

ElementPlus 配置国际化

直接参考文档，很简单的。就是中英文交换

https://element-plus.gitee.io/zh-CN/guide/i18n.html

在 main.ts 中配置默认语言

// ElementPlus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
app.use(ElementPlus, {
    locale: zhCn, // 默认中文语言
})

在 app.vue 中配置语言用到 el-config-provider 通过修改 locale

<script setup lang="ts">
import en from 'element-plus/lib/locale/lang/en'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { ref } from 'vue';

const locale = ref(zhCn)

function changeLan(lan: any) {
    if(lan == '中文') locale.value = zhCn
    if(lan == '英文') locale.value = en
}

const value = ref(new Date())
</script>

<template>
    <el-config-provider :locale="locale">
        <button @click="changeLan('中文')">中文</button>
        <button @click="changeLan('英文')">英文</button>
        <el-calendar v-model="value" />
    </el-config-provider>
</template>