likes
comments
collection
share

vue3项目使用Ant-Design-Vue组件库全局汉化

作者站长头像
站长
· 阅读数 58

一、前言

Ant-Design-Vue 组件库某些组件默认是英文显示的,如时间选择、分页、弹出框等组件。这些组件的显示需要用户手动去进行汉化。官方文档对此也给出了说明及示例,但示例与实际项目配置存在小幅度出入。

二、实现流程

  • 前置条件为已安装下载Ant-Design-Vue组件库,官网有详细流程,在此不做演示

1、安装及使用 dayjs 库。

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

npm install dayjs --save

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

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

3、在 App.vue 中添加以下配置

  • App.vue
<template>
  <a-config-provider :locale="zhCN">
    <router-view />
  </a-config-provider>
</template>
<script setup>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
</script>

进行以上操作后即可实现Ant-Design-Vue组件库全局汉化

转载自:https://juejin.cn/post/7262349502920949817
评论
请登录