Vue3项目Ant-Design-Vue汉化(a-date-picker等组件)

前言

Ant-Design-Vue 组件库某些组件默认是英文显示的,如时间选择等组件。这些组件的显示需要用户手动去进行汉化。

官方文档对此也给出了说明及示例,但截止到本篇博客发布日期,示例与实际项目配置存在小幅度出入。我也因此踩了一些坑,所以萌生了写这一篇博客的念头,分享一下本次经历,尽量避免其他人和我踩了相同的坑。

Vue3项目Ant-Design-Vue汉化(a-date-picker等组件)_第1张图片

操作方法

1. 官网说明及示例

先看官网给出的说明及示例。
Vue3项目Ant-Design-Vue汉化(a-date-picker等组件)_第2张图片

<template>
  <a-config-provider :locale="locale">
    <App />
  a-config-provider>
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 {
    data() {
      return {
        locale: zhCN,
      };
    },
  };
script>

官网给出的说明大体上是没有问题的,只在细节上有一些需要注意的地方,下面是实际操作中的配置过程。

2. 解决办法

Ant-Design 在 V3 版本开始,默认使用 dayjs 替换了 momentjs 库。

原本是打算用 momentjs 解决汉化时间问题的,但既然官网说了默认使用 dayjs 库,那我也同样使用这个库好了。

安装及使用 dayjs 库。

npm install dayjs --save

安装完成后在 main.ts 文件中添加以下配置。

main.ts

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

接着在 App.vue 中添加以下配置,为方便浏览,以下为 App.vue 完成内容。

App.vue

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

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

这样就已经配置完成了,接下来看效果。

Vue3项目Ant-Design-Vue汉化(a-date-picker等组件)_第3张图片

可以看到,汉化已经成功,至此 ant-design 汉化配置成功。

END

你可能感兴趣的:(vue.js,前端,前端框架)