antd-vue - - - - - date-picker中文化？

最新推荐文章于 2025-01-09 11:49:11 发布

原创最新推荐文章于 2025-01-09 11:49:11 发布 · 794 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #ui框架

antd-vue 专栏收录该内容

16 篇文章

订阅专栏

文章介绍了在使用antd的date-picker组件时遇到的非中文显示问题，以及如何通过在App.vue的顶层添加LocaleProvider并引入zh_CN语言包来全局解决这个问题，同时对dayjs库也进行了中文设置。

date-picker中文化

1.场景
2. 解决办法

1.场景

引入antd的date-picker之后发现效果如下：
在这里插入图片描述

what?为啥不是中文的呢？之前用element的时候也没遇到这个呀？

细细查看官方文档发现这么一句话：
官方地址: 【国际化配置】
在这里插入图片描述

2. 解决办法

因为全项目不确定有多少个地方在使用这组件，所以准备在顶层vue上包裹一层 LocaleProvider组

App.vue

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

<script>
import zhCN from "ant-design-vue/es/locale/zh_CN"; //汉化
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");

export default {
  setup() {
    return {
      zhCN
    };
  }
};
</script>