Ant Design Vue3 国际化配置

背景

使用 DatePicker 组件时，默认配置为 en-US，需要改为 zh-CN

• Ant Design Vue 版本：4.2.6
• 日期库：dayjs
• 这里主要以 Vue3 写法为主，具体参考官方文档即可

全局配置

在 App 入口组件中，如下配置即可全局国际化：

<template>
  <ConfigProvider :locale="zhCN">
    <router-view></router-view>
  </ConfigProvider>
</template>

<script setup>
import { ConfigProvider } from "ant-design-vue";
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'
import zhCN from "ant-design-vue/es/locale/zh_CN";
dayjs.locale('zh-cn')
</script>

• 这里根据需求配置即可
• 需要安装 dayjs 依赖

局部配置

局部配置，可以修改单一组件的语言

<template>
  <a-date-picker v-model:value="value" :locale="locale" />
</template>
<script setup>
import { ref } from 'vue';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

const value = ref();
</script>