Antdv日期選擇組件國際化問題

文章目錄

• Antdv日期選擇組件國際化問題
• • 1.問題描述
  • 2.問題解決
  • • 2.1解決與時間無關的locale問題
    • 2.2解決與時間相關的locale問題
  • 參考鏈接

1.問題描述

項目依賴ant-design-vue組件庫，在使用日期選擇組件DatePicker時，組件內容默認展示為英文，如下圖所示:

現(xiàn)需要將語言改為中文。

2.問題解決

日期選擇組件有兩部分國際化問題，一是與日期無關的按鈕等元素locale問題，二是與時間相關的locale問題

2.1解決與時間無關的locale問題

官網(wǎng)推薦在入口處使用提供的國際化組件，兩種方式可解決該問題，第一種方式已廢棄，經(jīng)驗證推薦使用第二種。

方法一：使用LocaleProvider 國際化

<template><a-locale-provider :locale="zhCN"><App /></a-locale-provider> </template> <script>import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'export default {data() {return {zhCN};},}; </script>

使用該方式控制臺會輸出報錯信息:[antdv: LocaleProvider] LocaleProvider is deprecated. Please use locale with ConfigProvider instead
2. 方法二：ConfigProvider 全局化配置

<template><a-config-provider :locale="zhCN"><App /></a-config-provider> </template> <script>import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'export default {data() {return {zhCN};},}; </script>

通過上述方式修改后，可以達到下圖效果：

2.2解決與時間相關的locale問題

DatePicker、MonthPicker、RangePicker、WeekPicker 部分 locale 是從 value 中讀取，需要正確設置 moment 的 locale

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

如果該方式依然不生效，檢查配置文件中是否忽略了所有語言版，導致未引入

// Ignore all locale files of moment.js new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)

最后的效果圖如下：

參考鏈接

DatePicker 日期選擇框

ConfigProvider 全局化配置

LocaleProvider 國際化

總結

以上是生活随笔為你收集整理的Antdv日期选择组件国际化问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。