ant design vue 日期选择框date-picker中英文混显问题解决

最新推荐文章于 2024-06-13 17:21:02 发布

拿回忆下酒

最新推荐文章于 2024-06-13 17:21:02 发布

阅读量2.4k

点赞数 4

文章标签： ant design vue vue date-picker

本文链接：https://blog.csdn.net/qq_38998250/article/details/129714314

版权

文章讲述了如何在AntDesignVue应用中进行全局化配置，以将界面语言设置为中文。通过在app.vue文件中使用ConfigProvider并导入zh_CN，大部分组件可以转换为中文。然而，date-picker组件的月份和星期仍然显示为英文。对于这种情况，分别针对AntDesignVuev2和v3提供了解决方案，涉及dayjs或moment库的中文本地化设置。

摘要由CSDN通过智能技术生成

ant design vue 默认引入是英文状态，因此我们需要转中文

app.vue文件

ConfigProvider 全局化配置

<template>
  <div class="app">
    <a-config-provider :locale="zhCN">
      <router-view />
    </a-config-provider>
  </div>
</template>

<script setup>
  import zhCN from 'ant-design-vue/es/locale/zh_CN';
</script>

这样设置后，一般情况UI就都会变成中文了。当然我们肯定还有异常情况😭

date-picker中英文混显

date-picker组件虽然展示中文了，但是月份和星期还是显示英文

//ant-design-vue v3版本
import "dayjs/locale/zh-cn";

//ant-design-vue v2版本
import moment from "moment";
import "moment/locale/zh-cn";
moment.locale("zh-cn");