antd vue国际化组件中文配置

在使用antd design vue的过程中 会出现DatePicker、MonthPicker、RangePicker、WeekPicker 等插件的展示是英文的情况

官方目前默认的文案就是英文 

所以使用的过程中需要我们自己手动进行中文适配：

方法一：

在入口文件（main.js）中添加代码进行全局设置：

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

同时在自己需要做中文适配的组件中进行适配：

<template>
    <div id="app">
        <a-range-picker :locale="locale" />
    </div>
</template>

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

 

方法二：

直接在需要适配的组件文件中添加代码：

<template>
    <div id="app">
        <a-range-picker :locale="locale" />
    </div>
</template>

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

 

本人在使用过程中import这两个后并无问题 但是有同事反映在使用的时候会出现一种现象：初始点击时为英文 再次点击才展示为中文

最后

import "moment/locale/zh-cn" moment.locale('zh-cn') import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; import moment from "moment"


<template>
    <div id="app">
        <!-- 全局化配置 -->
        <a-config-provider :locale="locale">
            <a-range-picker />
        </a-config-provider>
    </div>
</template>

bug修复

 

ps：进行以上代码时需要安装插件：npm i moment -S