搜索
简帛阁>技术文章>antd vue国际化组件中文配置

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

在使用antddesignvue的过程中会出现DatePicker、MonthPicker、RangePicker、WeekPicker等插件的展示是英文的情况官方目前默认的文案就是英文所以使用的过程
方法一在mainjs文件中,如下配置注意:项目中ElementPlus无论用不用CDN都需要安装。安装好ElementPlus下面的配置才会在开发环境生效。如果使用CDN打包,项目中需要单独引入ele
antdvueupload组件上传视频并实现视频预览html代码<form><aformitemlabel商品视频:labelCol{span:4}:wrapperCol{span:
VMS20开发过程中,使用了vueantd组件。然而,根据产品和交互的需求,需要实现以下设计稿的效果。使得用户可以直接在树节点上直接操作。通过调研发现,vueantd自带的组件库只能实现以下样式展现
项目需求中总是会有上传图片文件等功能,现在有时间正好做下简单总结一般常用的几个属性就是fileList,customRequest,multiple,showUploadList,before常用事件
antdforvuetable组件key报错Warning:[antdv:Eachrecordintableshouldhaveauniquekeyprop,orsetrowKeytoanunique
1LocaleProvider使用React的context特性,只需在应用外围包裹一次即可全局生效。import{LocaleProvider}from'antd';importzh_CNfrom'
目录vue动态添加store,路由和国际化vue动态添加storevue动态添加路由vue动态加载国际化前端项目用vuei18n实现国际化在项目中安装国际化包的依赖配置文件异步方式引入,一次只加载一种
组件里点击按钮后,打开模态框(模态框在子组件里)1首先注册点击事件,需要注意的是,在openInfo这个函数需要写在子组件里2给子组件添加ref3在子组件里写openInfo()
给Table组件添加Click事件,实现点击某行数据操作customRow设置行属性Function(record,index)通过customRow属性给table添加自定义事件<atable