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 只能在格式化的页面中引入，不能全局引入。
具体的使用方法，待我进一步测试。
本文已加入 腾讯云自媒体分享计划 (点击加入)
