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

德顺

发布于 2019-12-30 18:21:35

4.6K0

发布于 2019-12-30 18:21:35

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 ，这是一个日期格式化组件。

在项目根目录键入以下命令并回车：