ant-design-vue组件设置中文

背景

在开发用户编辑生日功能的时候,使用到了ant-design-vue中的DatePicker组件,DatePicker
但是组件的默认语言是英文,所以需要将组件的语言切换为中文.

解决方案

官方推荐了两种解决方案:
1. 全局配置语言
2. 局部配置语言

全局配置语言

我肯定首选是全局配置语言,因为只需要设置一次,不需要在每个页面都设置.

官方方案

官方给的示例代码如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

<template>
  <a-config-provider :getPopupContainer="getPopupContainer">
    <app/>
  </a-config-provider>
</template>
<script>
  export default {
    methods: {
      getPopupContainer(el, dialogContext) {
        if (dialogContext) {
          return dialogContext.getDialogWrap();
        } else {
          return document.body;
        }
      },
    },
  };
</script> 

这里的a-config-provider组件是用来全局配置语言的,它可以设置全局的语言,包括日期格式,时间格式,数字格式等.
我们只需要在a-config-provider组件中设置locale属性即可,它的值可以是zh-CN或者en-US,分别对应中文和英文.

自选方案

我用的是组件式的方式

在App.vue中只需要引入ConfigProvider组件,并将BasicLayout组件包裹在ConfigProvider组件中即可.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<script setup lang="ts">
import {inject} from 'vue'
import BasicLayout from '@/layouts/BasicLayout.vue'
import {LoginUserStore} from '@/stores/LoginUserStore.ts'

const locale = inject('locale')

const loginUserStore = LoginUserStore()
loginUserStore.fetchLoginUser()
</script>

<template>
  <div id="app">
    <a-config-provider :locale="locale">
      <BasicLayout/>
    </a-config-provider>
  </div>
</template>

<style>
  #app {
  }
</style>

在main.ts中注册了ConfigProvider组件,并注入了locale属性.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import {createApp} from 'vue'
import {createPinia} from 'pinia'

import App from './App.vue'
import router from './router'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/reset.css'
import './access.ts'
import zhCN from 'ant-design-vue/es/locale/zh_CN' // 引入中文语言包
import 'dayjs/locale/zh-cn' //引入dayjs的中文语言包

const app = createApp(App)

app.provide('locale', zhCN) // 注入locale属性
app.use(createPinia())
app.use(router)
app.use(Antd)
app.mount('#app') 

这样就可以全局配置语言了.