Antd Vue LocaleProvider國際化組件zh_CN中文配置
- 2019 年 12 月 30 日
- 筆記
Antd Design Vue 官方說明，DatePicker、MonthPicker、RangePicker、WeekPicker 等插件的部分 locale 是從 value 中讀取，目前的默認文案是英文，如果需要使用其他語言，需要通過下面的方案正確設置 moment 的 locale。
官方文檔推薦在入口文件（main.js）全局設置 locale ：
import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn');
前端組件這樣寫：不過我使用時遇到一個問題，使用 defaultValue 屬性時報錯，刪掉就好了。
<a-date-picker :defaultValue="moment('2015-01-01', 'YYYY-MM-DD')" />
完成上面的步驟後，日期組件還有部分顯示英文，並且年月順序錯誤。最後發現，Ant Design Vue 有一個國際化設置，需要在入口文件（App.vue）中引入組件 LocaleProvider 用於全局配置國際化方案。
<template> <a-locale-provider :locale="locale"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; export default { data() { return { locale: zhCN, }; }, }; </script>
也可以直接都寫到 App.vue 中：
<template> <a-locale-provider :locale="locale"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { locale: zhCN, } } } </script>
因為是配置中文，可以直接將 local 設置為 zhCN：
<template> <a-locale-provider :locale="zhCN"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { zhCN, } } } </script>
這樣以上組件既可以顯示中文了。
期間遇到一個小問題，如果您項目中沒有安裝 moment 庫也是不可以的，需要安裝 moment ，這是一個日期格式化組件。
在項目根目錄鍵入以下命令並回車：
npm i -S moment
根據網上的資料：
1、註冊 moment 組件：（main.js）
Vue.prototype.$moment = moment;
一般我們只需要日期格式化即可：moment(要格式化的內容).format("YYYY-MM-DD HH:mm:ss")
2、也有人說 moment 只能在格式化的頁面中引入，不能全局引入。
具體的使用方法，待我進一步測試。
本文已加入 騰訊雲自媒體分享計劃 (點擊加入)
