问题
在使用 a-calendar 时，发现配置的中文不生效，官网日历页面的说明不完整，而搜索殷勤搜索到的大部分文档都没说到点上（各种偏方）。
以下根据官网文档提及的配置方式，从根本上说明并解决该问题。
根本原因
该问题属于语言配置的问题，而ant-design-vue 提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化文案。
方法
App.vue 配置如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script setup lang="ts">
import 'ant-design-vue/dist/reset.css';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
</script>
<template>
<a-config-provider :locale="zhCN">
<Hello-World/>
</a-config-provider>
</template>
|
Hello-World.vue 如下：
1
|
<a-calendar v-model:value="value"/>
|
参考
【1】日历 Calendar - Ant Design Vue (antdv.com)
【2】国际化 - Ant Design Vue (antdv.com)
Preview: