i18n 配置vue项目中英文语言包(中英文转化)
一、实现效果
二、下载插件创建文件夹
2.1 下载cookie来存储
npm install --save js-cookienpm i vue-i18n -S
2.2 封装组件多页面应用
2.3 创建配置语言包字段
三、示例代码
3.1 main.js 引用 i18n.js
import i18n from './lang'// 实现语言切换:i18n处理element,根据locale属性去寻找显示内容
Vue.use(Element, {i18n: (key, value) => i18n.t(key, value),
})new Vue({i18n,render: (h) => h(App),
})
3.2 封装组件:src\components\LangSelect\index.vue
<template><el-dropdown trigger="click" @command="handleSetLanguage"><div><div class="lang_img"><img src="@/assets/ch-en.png" alt="语言切换" title="语言切换" /></div></div><el-dropdown-menu slot="dropdown"><el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">中文</el-dropdown-item><el-dropdown-item command="en" :disabled="'en' === $i18n.locale">English</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template><script>import Cookies from 'js-cookie'export default {methods: {// 中英文语言切换handleSetLanguage(lang) {Cookies.set('language', lang) // 切换多语言this.$i18n.locale = lang // 设置给本地的i18n插件this.$message({message: this.$t('public.switch'),type: 'success',})},},}
</script>
<style lang="scss" scoped>.lang_img {margin-right: 10px;cursor: pointer;img {width: 25px;height: 25px;}}
</style>
3.3 导入配置的字段:src\lang\index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh'
import enLocale from './en'Vue.use(VueI18n)export default new VueI18n({locale: Cookies.get('language') || 'zh', // 从cookie缓存中获取语言类型 获取不到就是中文messages: {en: {...enLocale, // 引入英文语言包...elementEnLocale, // 引入自定义的语言包},zh: {...zhLocale, // 引入中文语言包...elementZhLocale,},},
})
3.4 中文字段:src\lang\zh.js
export default {index: '首页',helpmenu: '帮助', public: {MoreActions: '更多操作',CloseAll: '关闭所有',switch: '切换语言成功',},
}
3.5 英文字段:src\lang\en.js
export default {index: 'Home',helpmenu: 'Help Menu', public: {MoreActions: 'More Actions ', CloseAll: 'Close All',switch: 'Successfully Switched Language',},
}
zh.js和en.js中的变量名称要对应起来
四、使用语言包功能
4.1 页面使用组件
<template><div><LangSelect /> // 使用</div>
</template><script>import LangSelect from '@/components/LangSelect' // 导入export default { components: { // 注册LangSelect, },}
</script>
4.2 替换页面中的字段
1、{{$t('index')}}2、:placeholder="$t('public.switch')"3、:label="$t('public.switch')"4、message: this.$t('public.switch'),
相关文章:

i18n 配置vue项目中英文语言包(中英文转化)
一、实现效果 二、下载插件创建文件夹 2.1 下载cookie来存储 npm install --save js-cookienpm i vue-i18n -S 2.2 封装组件多页面应用 2.3 创建配置语言包字段 三、示例代码 3.1 main.js 引用 i18n.js import i18n from ./lang// 实现语言切换:i18n处理element,…...

NFTScan NFT API 在 DID Protocol 开发中的应用
自互联网发展以来,Web2.0 时代产生了网络社会,社会已经不再局限于地理边界,而 Web 3.0 引入了去中心化的理念,强调个体数据隐私和可信互操作性。在这个新的时代中,去中心化身份(Decentralized Identifier 即…...
内存管理(1)
内存管理(1) 1、各类型数据在内存中的存储空间2、C内存管理方式2.1 针对于内置类型分析2.2 针对于自定义类型分析2.3 C语言与C在申请动态内存失败时的区别 3、operator new 和 operator delete函数(重点)3.1 底层知识解析3.2 实现…...

实践教程|基于 pytorch 实现模型剪枝
PyTorch剪枝方法详解,附详细代码。 一,剪枝分类 1.1,非结构化剪枝 1.2,结构化剪枝 1.3,本地与全局修剪 二,PyTorch 的剪枝 2.1,pytorch 剪枝工作原理 2.2,局部剪枝 2.3&#…...

[Docker精进篇] Docker镜像构建和实践 (三)
前言: Docker镜像构建的作用是将应用程序及其依赖打包到一个可移植、自包含的镜像中,以便在不同环境中快速、可靠地部署和运行应用程序。 文章目录 Docker镜像构建1️⃣是什么?2️⃣为什么?3️⃣镜像构建一、用现有容器构建新镜像…...

【Unity细节】Unity中的层级LayerMask
👨💻个人主页:元宇宙-秩沅 hallo 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 秩沅 原创 😶🌫️收录于专栏:unity细节和bug 😶🌫️优质专栏 ⭐【…...

修改el-table行悬停状态的背景颜色
.content:deep().el-table tr:hover>td {background-color: #f5f5f5 !important; /* 设置悬停时的背景颜色 */ }/*这一点很重要,否则可能会导致hover行时操作列还是原来的背景色*/ .content:deep().el-table__body tr.hover-row>td{background-color: #f5f5f5…...
记一次mysql not in的使用问题
现象:使用not in 某个id集合,出现脏数据,存在null数据。例如:not in(1,2,null),结果会一条数据都没有,为空 原因: 当使用NOT IN操作符时,传递给它的值列表中不能包含NULL值…...

JavaFx基础学习【四】:UI控件的通用属性
目录 前言 一、介绍 二、继承关系 三、常用通用属性 四、属性Properties 五、属性绑定 六、属性监听 七、事件驱动 八、其他章节 前言 如果你还没有看过前面的文章,可以通过以下链接快速前往学习: JavaFx基础学习【一】:基本认识_明…...

【Leetcode】101.对称二叉树
一、题目 1、题目描述 给你一个二叉树的根节点 root , 检查它是否轴对称。 示例1: 输入:root = [1,2,2,3,4,4,3] 输出:true示例2: 输入:root = [1,2,2,null,3,null,3] 输出:false提示: 树中节点数目在范围 [1, 1000] 内-100 <= Node.val <= 100进阶:你可以…...

用Java实现原神抽卡算法
哈喽~大家好,好久没有更新了,也确实遇到了很多事,这篇开始恢复更新,喜欢的话,可以给个的三连,什么?你要白嫖?那可以给个免费的赞麻。 🥇个人主页:个人主页…...

微服务—Eureka注册中心
eureka相当于是一个公司的管理人事HR,各部门之间如果有合作时,由HR进行人员的分配以及调度,具体选哪个人,全凭HR的心情,如果你这个部门存在没有意义,直接把你这个部门撤销,全体人员裁掉,所以不想…...

AI问答:JSBridge / WebView 与 Native 通信
一、理解JSBridge JSBridge是一种连接JavaScript和Native代码的桥梁,它提供了一种方法,使得JavaScript可以直接调用Native的代码,同时使得Native的代码也能直接调用JavaScript的方法,从而实现了JavaScript和Native之间的相互调用和…...
Mybatis动态SQL,标签大全
动态SQL常用场景 批量删除delete from t_car where id in(1,2,3,4,5,6,......这里的值是动态的,根据用户选择的 id不同,值是不同的);多条件查询哪些字段会作为查询条件是不确定的,根据用户而定 select * from 1 t_car where brand like 丰田…...

zotero在不同系统的安装(win/linux)
1 window系统安装 zotero 官网: https://www.zotero.org/ 官方文档 :https://www.zotero.org/support/ (官方)推荐常用的插件: https://www.zotero.org/support/plugins 入门视频推荐: Zotero 文献管理与知识整理最佳实践 点击 exe文件自…...

web会话跟踪以及JWT响应拦截机制
目录 JWT 会话跟踪 token 响应拦截器 http是无状态的,登录成功后,客户端就与服务器断开连接,之后再向后端发送请求时,后端需要知道前端是哪个用户在进行操作。 JWT Json web token (JWT), 是为了在网络应用环境间传递声明而…...

Web菜鸟入门教程 - Swagger实现自动生成文档
如果是一个人把啥都开发了,那用不到Swagger-UI,但一般情况是前后端分离的,所以就需要告诉前端开发人员都有哪些接口,传入什么参数,怎么调用,返回什么。有了Swagger-UI就能把这部分文档编写的业务给省去了。…...

2023国赛数学建模思路 - 复盘:校园消费行为分析
文章目录 0 赛题思路1 赛题背景2 分析目标3 数据说明4 数据预处理5 数据分析5.1 食堂就餐行为分析5.2 学生消费行为分析 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 赛题背景 校园一卡通是集…...

第7章:贝叶斯分类器
贝叶斯决策论 贝叶斯分类器:使用贝叶斯公式 贝叶斯学习:使用分布估计(不同于频率主义的点估计) 极大似然估计 朴素贝叶斯分类 半朴素贝叶斯 条件独立性假设,在现实生活中往往很难成立。 半朴素贝叶 斯的一个常用策略…...
【LeetCode】88.合并两个有序数组
题目 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中,使合并后的数组同样按 非递减顺序 排列。 注意:最终,合并…...

JavaSec-RCE
简介 RCE(Remote Code Execution),可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景:Groovy代码注入 Groovy是一种基于JVM的动态语言,语法简洁,支持闭包、动态类型和Java互操作性,…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...

学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...

自然语言处理——Transformer
自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效,它能挖掘数据中的时序信息以及语义信息,但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN,但是…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...

20个超级好用的 CSS 动画库
分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码,而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库,可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画,可以包含在你的网页或应用项目中。 3.An…...
现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?
现有的 Redis 分布式锁库(如 Redisson)相比于开发者自己基于 Redis 命令(如 SETNX, EXPIRE, DEL)手动实现分布式锁,提供了巨大的便利性和健壮性。主要体现在以下几个方面: 原子性保证 (Atomicity)ÿ…...

在Mathematica中实现Newton-Raphson迭代的收敛时间算法(一般三次多项式)
考察一般的三次多项式,以r为参数: p[z_, r_] : z^3 (r - 1) z - r; roots[r_] : z /. Solve[p[z, r] 0, z]; 此多项式的根为: 尽管看起来这个多项式是特殊的,其实一般的三次多项式都是可以通过线性变换化为这个形式…...