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

最新推荐文章于 2024-04-23 14:33:45 发布
最新推荐文章于 2024-04-23 14:33:45 发布
阅读量4.6k 收藏 6
点赞数 5
分类专栏： VUE 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kiyoometal/article/details/106780329
版权

举个栗子，我在项目中遇到了一个问题，table组件的分页器页数默认显示为英文，
在这里插入图片描述

查了一下，可以用<a-locale-provide>标签去实现，使用过程中发现这个标签已经废弃，于是总结出以下方法：

// App.vue
<template>
  <div>
    <a-config-provider :locale="locale">
      <div id="app"
最低0.47元/天 解锁文章
邬羽
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Ant Design Vue的国际化设置（全局中文设置）
weixin_55066886的博客
05-07 689
【代码】Ant Design Vue的国际化设置（全局中文设置）
【前端】ant-design-vue 汉化 配置 中文语言
我是Superman丶的博客
04-19 1612
【代码】【前端】ant-design-vue 汉化 配置 中文语言。
antd-vue - - - - - a-config-provider全局配置中英文切换
最新发布
Dark_programmer的博客
04-23 639
antd-vue - - - - - a-config-provider全局配置中英文切换
ant-design-vue组件国际化(en/zh-cn)
weixin_42386379的博客
10-12 3496
ant-design-vue组件国际化(vue2版本)
解决Ant Design国际化问题
努力搬砖的小码
05-29 398
【代码】解决Ant Design国际化问题。
记录使用vue-i18n实现项目的双语国际化
weixin_45313351的博客
12-15 1422
本文是使用vue2.x + ant-design-vue 搭建的项目，对于框架使用不会做过多的说明以下是需要思考的问题1、如何使用vue-i18n？2、互译的语言数据存放在哪里合适？3、ant-design-vue如何国际化？4、如何全局监听切换了语言？5、语言的不同如何兼容样式？
ant design pro 打包空白_给你代码：ant-desgin-vue使用
weixin_39918690的博客
11-25 583
安装 推荐使用vue-cli安装 npm install -g @vue/cli安装完毕安装ant-designnpm install -g ant-design-vue 然后就可以使用了使用 import 'ant-design-vue/dist/antd.css';import Antd from 'ant-design-vue';Vue.use(Antd); 安装默认如果编译的话(全部引入)...
用于设置ant-design-vue中table组件的列宽可拖拽
08-05
vuex2.x中用于设置ant-design-vue中table组件的列宽可拖拽
vue的国际化实现，包括ant-design-vue与自定义的实现
04-08
本篇文章将详细讲解如何在Vue项目中实现国际化，特别是结合了Ant Design Vue库的场景。 首先，让我们了解基础概念。Vue的国际化插件通常使用`vue-i18n`，它提供了方便的方式来管理和切换应用中的多语言内容。`vue-...
SpringBoot+AntDesignVue实现excel导入功能
07-20
描述： 该文章旨在介绍如何使用 SpringBoot 和 AntDesignVue 实现 Excel 导入功能，该功能主要是使用 Ant Design Vue 中的 upload 组件来实现导入 excel 文件的功能。 标签： SpringBoot AntDesignVue excel 实现 ...
vue_ant-design-vue菜单递归
12-28
在Vue.js框架中，Ant Design Vue是一个非常流行的UI组件库，它提供了丰富的界面元素和设计模式，便于开发者构建美观且功能强大的Web应用。本项目主要关注的是Ant Design Vue中的菜单（Menu）组件，特别是如何处理...
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
08-14
**AntDesignVue：基于Ant Design和Vue的企业级UI组件库** AntDesignVue是开发者们用于构建企业级前端界面的重要工具，它将阿里巴巴的Ant Design设计理念与Vue.js框架完美结合，提供了一系列高质量、易于使用的UI...
ant design vue pro设置默认语言为中文
ke_sin的博客
04-13 4048
1.在src\locales\index.js文件修改默认语言 // import enUS from './lang/en-US' import zhCN from './lang/zh-CN' Vue.use(VueI18n) // export const defaultLang = 'en-US' export const defaultLang = 'zh-CN' const messages = { // 'en-US': { // ...enUS // } 'zh-
2020-10-20 Ant Design Vue 关闭国际化设置默认语言为中文的
qmllmp的博客
10-20 3678
作为一个小白，一开始做中后台项目用的就是Antdv 百度找不到什么资料的情况下还是蛮绝望的，慢慢的搞懂一些框架用法之后写一下自己的踩坑日志，希望能帮助到别人。如有不正确的地方，敬请提出指正。谢谢各位。 以下正文： 在百度上搜索了一下，Antd关闭国际化最多的答案是找到“src\config\defaultSettings.js”文件，修改menu的locale选项设置为false。 /** * 项目默认配置项 * primaryColor - 默认主题色, 如果修改颜色不生效，请清理 loca.
【Antd+vue】Antd pro项目设置默认语言为中文
Emily's Blog
07-17 9211
最近使用ANT DESIGN PRO OF VUE进行内部系统的开发，发现从官网拉下来的脚手架默认语言为英文，那么就需要我们额外设置一波了！通过简单3步，日期控件等默认也均为中文哒！ Step1. 在src\locales\index.js文件修改默认语言 // default lang // import enUS from './lang/en-US' import zhCN from './lang/zh-CN' // 默认语言由英文改为中文 Vue.use(VueI18n) // export
vue + ant 项目 之分页的中文实现(Go to 到跳至)
weixin_43845137的博客
10-30 1309
目录把分页中的go to 转化为 跳至 把分页中的go to 转化为 跳至 下载 ant-design-vue 之后 引入这个中文包 使用这个 ConfigProvider 组件包裹即可！ 需要引入并且注册，才能使用的 <template> <a-config-provider :locale="locale" > <div id="app"> <router-view /> </div> &
antd 英文_现在npm install下来的ant 默认是英文的国际化, 怎么恢复成中文呢?
weixin_35120608的博客
01-14 1130
import { LocaleProvider } from 'antd';import zh_CN from 'antd/lib/locale-provider/zh_CN';import 'moment/locale/zh-cn';...return ;在 本项目下 /src/router.js 中插入import { LocaleProvider } from 'antd';import z...
vue2 + antd 国际化 中英文切换
weixin_47247635的博客
07-14 353
参考我vue2+elemnet 国际化，略微不同的是antd 在 configprovider 配置语言 在 App.vue 中配置，其他大致一样。
antd vue修改分页_Antd Vue 国际化zh_CN，vue3.0配置pagination组件按钮分页文本中文
weixin_39962153的博客
12-19 1193
Antd Design Vue 官方说明，DatePicker、MonthPicker、RangePicker、WeekPicker 等插件的部分 locale 是从 value 中读取，目前的默认文案是英文，如果需要使用其他语言，需要通过下面的方案正确设置 moment 的 locale。因为我的需求是pagination组件的 show-quick-jumper 的文本，由Go to变为中文跳...
ant design vue 国际化配置
09-03
在 Ant Design Vue 中进行国际化配置非常简单。下面是一些步骤： 1. 首先，确保你已经安装了 `ant-design-vue` 和 `vue-i18n` 这两个依赖包。＊＊＊＊＊＊文语言包： ```javascript export default { antd: { // 以下是 antd 组件的国际化配置 locale: 'zh_CN', Pagination: { // ... }, // ... }, // 其他自定义的国际化配置 // ... }; ``` 4. 在 `en-US.js` 文件中，你可以按照如下方式配置英文语言包： ```javascript export default { antd: { // 以下是 antd 组件的国际化配置 locale: 'en_US', Pagination: { // ... }, // ... }, // 其他自定义的国际化配置 // ... }; ``` 5. 在你的入口文件（例如 `main.js`）中引入 `vue-i18n` 和语言包文件，并配置 i18n 实例： ```javascript import Vue from 'vue'; import VueI18n from 'vue-i18n'; import zhCN from './locales/zh-CN'; import enUS from './locales/en-US'; Vue.use(VueI18n); const i18n = new VueI18n({ locale: 'zh-CN', // 默认语言为中文 messages: { 'zh-CN': zhCN, 'en-US': enUS, }, }); new Vue({ i18n, // ... }).$mount('#app'); ``` 6. 到此，你的国际化配置就完成了！在组件中使用 Ant Design Vue 的组件时，它们会根据当前的语言环境显示相应的语言。 例如，在一个按钮组件中，你可以这样使用国际化： ```html <template> <a-button>{{ $t('antd.Button') }}</a-button> </template> ``` 这里的 `$t` 是 VueI18n 提供的翻译方法，`'antd.Button'` 是你在语言包中配置的对应翻译字段。 希望这些信息能对你有所帮助！如果有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值