ElementUI默认文字国际化

最新推荐文章于 2024-05-12 15:55:29 发布
最新推荐文章于 2024-05-12 15:55:29 发布
阅读量609 收藏 2
点赞数 1
文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45966507/article/details/130869434
版权
今天遇到一个需求，我们的客户是台湾的嘛，所以给他们定做的系统需要繁体简体切换功能，那么组件当中的自定义文字我们采用的是vuei18n来实现的，但是ElementUI的默认文字也需要修改，并且需求上跟默认的繁体语言包不太一样；

解决方法：通过下拉选择语言时，检测本地存储的sessionStoorage的语言状态，动态地更换ElementUI的语言包，由于不能使用默认语言包，所以我们把默认语言包复制出来，自己修改并且import，这样打包的时候也只是增加了三个语言包的js文件，占不了多大内存，同时按照需求更改了ElementUI的默认文字；

大致代码如下：

在这里插入图片描述

风炑
关注
若依框架i18n国际化
renkai721的专栏
09-12 1万+
ruoyi国际化,vue国际化,springboot国际化,i18n国际化,vue菜单国际化不起作用,vue页面刷新国际化失效
Vue项目+切换中英文+element国际化
GTbond的博客
01-10 1907
vue项目中切换中英文（基础版） 1. 使用 vue-i18n 插件 安装：npm install vue-i18n 官网：https://kazupon.github.io/vue-i18n/zh/started.html 2. 在main.js文件加入i18配置 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 引入VueI18
vue elementui 中使用国际化
weixin_39205240的博客
07-30 2255
 1.定义i18n文件夹，并添加index.js,en.js,zh.js  index.js import Vue from 'vue'; //引入vue-i18n cnpm i vue-i18n; import VueI18n from 'vue-i18n'; import enElementLocale from 'element-ui/lib/locale/lang/en' impor...
elementui国际化
lyy112987的博客
03-24 2174
import Vue from 'vue' import App from './App.vue' import '@/theme/index.scss' import Element from 'element-ui' //引入elementUI， 安装的是2.×版本 import VueI18n from 'vue-i18n' //引入 i18n ，安装的是8.×版本 //引入Element的语言包 import enLocale from 'element-ui/lib/locale/lang/.
element国际化
ct5211314的博客
03-23 917
新建lang文件夹，在文件夹内创建zh.js、en.js、index.js文件 zh.js文件说明：用于配置需要中英文转换的中文部分 en.js文件说明：用于配置需要中英文转换的英文部分 index.js文件说明：用于设置国际化 在main.js文件中引入并挂载到Vue实例上去 三、切换中英文展示
elementUI+国际化
岁末zzz的博客
08-21 1166
先创建一个lang 文件夹,创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index.js文件(用于) 在index.js 中引入vue和vue-i18n, 并注册vue-i18n 然后 引入en.js和zh.js两个文件 (1) elementEnLocale 和elementZhLocale 是element-ui国际化需要的,如果没有使用element-ui...
修改element文本域默认字体
爬楼梯的前端小白的博客
09-26 916
【代码】el文本域字体。
解决vue elementUI中table里数字、字母、中文混合排序问题
10-15
在实际应用中，这种自定义排序方法非常实用，尤其在国际化项目中，可能需要根据不同的语言环境制定不同的排序规则。本文提供的代码示例和方法为开发者提供了一个可行的解决方案，并且可以灵活应对不同的场景需求。 ...
elementUI分页显示文字 将条/页改为项/页
最新发布
10-17
Element UI 的分页组件默认展示的是“每页多少条”，如果你想将其更改显示为“每页多少项”或者是“第几页共有多少项”，这需要自定义分页组件的国际化 (i18n) 或者直接修改其文本。 你可以通过以下步骤来实现这个...
【vue 进阶指南 一】多语言国际化（中英文切换）
cometang--唐家世少
10-18 1032
vue + element-ui + vue-i18n 多语言国际化 1.element-ui 并不支持最新版的vue-i8n 插件，开发时注意i18n的版本，当然本示例成功解决版本不兼容的问题，详细说明请看element官方文档：http://element-cn.eleme.io/#/zh-CN/component/i18n 2.当前引入模式兼容了element-ui，如果未引入elem...
vue、elementUI项目国际化
qq_45672719的博客
12-11 225
1.安装 npm i vue-i18n -S 2.在src下新建文件夹lang、lang/zh.js根据项目自行配置中文、lang/en.js根据项目自行配置英文 3.lang/index.js设置国际化配置 import Vue from 'vue' import VueI18n from 'vue-i18n' import en from './en' import zh from './zh' import enLocale from 'element-ui/lib/locale/lang/en' i
vue+elementUI 实现国际化
m0_58971821的博客
06-18 1354
国际化
保姆级 vue（element-UI) 项目的国际化
qq_42824830的博客
05-28 712
vue项目进行国际的操作详细介绍 （采用iview 国际化的思想） 一，前期搭建环境部分 1） 对一个已有的vue项目，引入vue-i18n 资源包 npm install vue-i18n 2） 新建对应的 （zh.json / en.json） 文件 路径随意 ,及json内容格式填写 3）在main.js (App.vue 平级) 引入(添加部分)对应的配置信息 import elementUI from 'element-ui' import VueI18n from 'vue-
老张跟着老许学前端之----自己研究出来的element-ui国际化
ajq950224的博客
05-12 368
最清晰且便捷的告诉大家，前端国际化怎么实现，傻瓜式文章，写不出来，自断双手吧
Vue2.0+elementUI实现国际化
weixin_48888726的博客
11-09 823
Vue2.0+elementUI实现国际化
Vue+Element-ui 国际化 多语言切换（包括element-ui 组件文字国际化）
qq_46058838的博客
10-27 4625
Vue+Element-ui 国际化 多语言切换（包括element-ui 组件文字国际化）
vue2+element-ui 实现国际化
qq_45780736的博客
02-02 2541
vue2+element-ui实现项目语言国际化
vue的element-ui 中 i18N国际化
YanR_W的博客
08-26 507
i18N 1.在main.js中引入i8n . import VueI18n from 'vue-i18n' import enLocale from 'element-ui/lib/locale/lang/en' import zhLocale from 'element-ui/lib/locale/lang/zh-CN' Vue.use(VueI18n) // 语言切换 const i18n = new VueI18n({ locale:localStorage.getItem('niulan.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

风炑

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值