w3h5

Antd Vue LocaleProvider国际化组件zh_CN中文配置

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 只能在格式化的页面中引入,不能全局引入。

具体的使用方法,待我进一步测试。

赞 (0)
分享到: +More |

评论 沙发

换个身份