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