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