【vue3】【elementPlus】【国际化】

1.如需从0-1开始,请参考 https://blog.csdn.net/Timeguys/article/details/140995569

2.使用 vue-i18n 模块:

npm i vue-i18n

3.在 src 目录下创建 locales 目录,里面创建文件:en.js、zh-cn.js、index.js 语言js文件:

// en.jsexport default {login: {title: 'Login Form',logIn: 'Login',username: 'Username',password: 'Password'}
}
// zh-cn.jsexport default {login: {title: '系统登录',logIn: '登录',username: '账号',password: '密码'}
}
// index.jsimport { createI18n } from 'vue-i18n'
import elEnLocale from 'element-plus/es/locale/lang/en'
import elZhLocale from 'element-plus/es/locale/lang/zh-cn'
import enLocale from './en'
import zhLocale from './zh-cn'const messages = {en: {...enLocale,...elEnLocale},'zh-cn': {...zhLocale,...elZhLocale}
}export const getLocale = () => {// 获取缓存const storLanguage = localStorage.getItem('language')// 存在返回当前语言if (storLanguage) return storLanguage// 不存在 获取系统语言const language = (navigator.language || navigator.browserLanguage).toLowerCase()const locales = Object.keys(messages)for (const locale of locales) {if (language.indexOf(locale) > -1) {return locale}}// 默认返回简体中文return 'zh-cn'
}
const i18n = createI18n({globalInjection: true,legacy: false,locale: getLocale(),messages: messages
})
export default i18n

4.编辑 main.js,挂载国际化文件:

在这里插入图片描述

5.编辑 App.vue 使用 el-config-provider 标签配置:

在这里插入图片描述

6.在 components 创建一个 language.vue 组件:

<script setup>
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
const languages = [{ name: 'English', value: 'en' },{ name: '中文', value: 'zh-cn' }
]
const handleSetLanguage = (lang) => {locale.value = langlocalStorage.setItem('language', lang)
}
</script><template><el-button type="" v-for="item in languages" :key="item.value" @click="handleSetLanguage(item.value)">{{ item.name }}</el-button>
</template>

7.在测试页面引入 组件进行测试:

在这里插入图片描述

8.效果:

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/397738.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

html5宠物网站模板源码

文章目录 1.设计来源1.1 主界面1.2 主界面菜单1.3 关于我们界面1.4 宠物照片墙界面1.5 宠物博客界面1.6 宠物服务界面1.7 宠物团队界面1.8 联系我们界面 2.效果和源码2.1 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 【博主推荐】&a…

【轻松掌握】使用Spring-AI轻松访问大模型本地化部署并搭建UI界面访问指南

文章目录 读前必看什么是Spring-AI目前已支持的对接模型本文使用Spring-AI版本构建项目选择必要的依赖配置系统变量 聊天模型API配置文件方式1-使用默认配置方式2-自定义配置配置其他参数使用示例 图像模型API配置文件方式1-使用默认配置方式2-自定义配置配置其他参数使用示例 …

开发效率翻倍攻略!大学生电脑小白管理秘籍,资料秒搜技巧大公开!C盘满了怎么办?如何快速安全的清理C盘?烦人的电脑问题?一键解决!

如何正确管理自己的第一台电脑&#xff1f;大一新生如何管理自己的电脑&#xff1f;老鸟如何追求快捷操作电脑&#xff1f; 文章目录 如何正确管理自己的第一台电脑&#xff1f;大一新生如何管理自己的电脑&#xff1f;老鸟如何追求快捷操作电脑&#xff1f;前言初级基础分区操…

2024年第八届计算生物学与生物信息学国际会议 (ICCBB 2024)即将召开!

2024 年第八届计算生物学和生物信息学国际会议&#xff08;ICCBB 2024&#xff09;将于2024年11月28 -30在日本京都召开&#xff0c;ICCBB 2024是展示理论、实验和应用计算生物学和生物信息学领域新进展和研究成果的主要论坛之一。我们相信&#xff0c;通过大家的共同努力&…

oled使用 f4软件iic 数字 汉字 小图片 HAL库

基于江科大的oled标准库进行移植 到Hal库上 本人参考了许多大佬的源码 进行更改 由于F4和F1主频不一样 由于F4主频太高 在进行软件iic时需要延时一下 才可驱动oled 本人在网上找了一个开源的us延时函数 已经添加进入 文件分享 通过百度网盘分享的文件&#xff1a;delay&#…

记一次 .NET某智慧出行系统 CPU爆高分析

一&#xff1a;背景 1. 讲故事 前些天有位朋友找到我&#xff0c;说他们的系统出现了CPU 100%的情况&#xff0c;让你帮忙看一下怎么回事&#xff1f;dump也拿到了&#xff0c;本想着这种情况让他多抓几个&#xff0c;既然有了就拿现有的分析吧。 二&#xff1a;WinDbg 分析…

socket回显服务器练习

前言 什么是回显服务器(echo server)呢&#xff1f; 回显服务器接收客户端发送的任何数据&#xff0c;并将这些数据原封不动地发送回客户端。回显服务器在连接成功的基础上只需要知道如何在客户端将收到的信息打印输出到控制台即可。我接下来会使用两种方法来输出&#xff0c;…

精通C++ STL(六):list的模拟实现

目录 类及其成员函数接口总览 结点类的模拟实现 构造函数 迭代器类的模拟实现 迭代器类存在的意义 迭代器类的模板参数说明 构造函数 运算符的重载 --运算符的重载 运算符的重载 !运算符的重载 *运算符的重载 ->运算符的重载 list的模拟实现 默认成员函数 构造函数 拷贝…

力扣 | 递增子序列 | 动态规划 | 最长递增子序列、最长递增子序列的个数、及其变式

文章目录 一、300. 最长递增子序列二、673. 最长递增子序列的个数三、变式1、646. 最长数对链2、1218. 最长定差子序列3、1027. 最长等差数列4、354. 俄罗斯套娃信封问题5、1964. 找出到每个位置为止最长的有效障碍赛跑路线 最长递增子序列&#xff1a;原序-递增数值问题 最长定…

无人机之陀螺仪篇

陀螺仪器最早是用于航海导航&#xff0c;但随着科学技术的发展&#xff0c;它在航空和航天事业中也得到广泛的应用。陀螺仪不仅可以作为指示仪表&#xff0c;而更重要的是它可以作为自动控制系统中的一个敏感元件&#xff0c;即可作为信号传感器。 根据需要&#xff0c;陀螺仪器…

使用字典优化命令行参数处理

在 Python 中&#xff0c;可以使用字典优化命令行参数的处理。特别是在处理多个选项或参数时&#xff0c;使用字典可以使代码更加简洁和易于维护。以下是一个使用 argparse 模块和字典来管理命令行参数的示例。 问题背景 在一个项目中&#xff0c;您需要根据用户通过命令行参数…

yolov5更换MobileNetV3的主干网络

目录 1.定义网络 2.将test_MobileNetV3.py上面的代码复制粘贴到如下文件里面 2.1复制需要更改的原来的网络如何改结构 3.更改yolo.py注册网络 1.定义网络 1. 宽度为0.5的YOLOV5网络的结构图 在主干网络上面可以重新定义成三层&#xff0c;编号从0开始 如图是MobileNetV3 的…

掌握7步网站设计流程,提升你的网站用户体验

在当代社会&#xff0c;网站制作已经成为不可或缺的一部分。随着互联网的发展&#xff0c;越来越多的人开始使用网站浏览器来获取信息、交流和消费。一个好的网站设计可以吸引用户的注意力&#xff0c;提高用户体验&#xff0c;从而提高用户的满意度和忠诚度。那么&#xff0c;…

网络剪枝——network-slimming 项目复现

目录 文章目录 目录网络剪枝——network-slimming 项目复现clone 存储库Baselinevgg训练结果 resnet训练结果 densenet训练结果 Sparsityvgg训练结果 resnet训练结果 densenet训练结果 Prunevgg命令结果 resnet命令结果 densenet命令结果 Fine-tunevgg训练结果 resnet训练结果 …

移情别恋c++ ദ്ദി˶ー̀֊ー́ ) ——5.string

1.字符串相乘 . - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 1.如果两个串有一个首元素为‘0’&#xff0c;则直接返回‘0’ 2.设置两层循环&#xff0c;内层第一次循环 用于str插入初始数据 &#xff08;num2 的各个元素和num1 的最后一个元素相乘的结果&#…

C代码做底层及Matlab_SimuLink做应用层设计单片机程序

前言:SimuLink工具极其强大,但是能直接支持单片机自主开发的很少,造成这个问题的原因主要是我们使用的芯片底层多是C代码工程,芯片厂家也只提供C代码库,很少能提供SimuLink的支持库,即使提供也不是很不完善,如NXP的一些芯片提供的SimuLink库不含盖高级应用,再比如意法半…

哈希表 - 快乐数

202. 快乐数 方法一&#xff1a;用哈希集合检测循环 /*** param {number} n* return {boolean}*/let getNext function(n) {return n.toString().split().map(i > i ** 2).reduce((a, b) > a b); }let isHappy function(n) {let seen new Set();while (n ! 1 &&…

什么是跨境电商独立站?为什么选择做独立站?

独立站在近两年被推上风口&#xff0c;很多人跟风涌入赛道&#xff0c;但并不知道做独立站的根本原因是什么&#xff1f;为什么跨境电商要做独立站&#xff1f; 今天分享这篇文章&#xff0c;希望能帮助正在建站或想要建站的朋友们建立起对独立站的基本认知&#xff0c;做到不踩…

【学习笔记】Matlab和python双语言的学习(图论最短路径)

文章目录 前言一、图论基本概念示例 二、代码实现----Matlab三、代码实现----python总结 前言 通过模型算法&#xff0c;熟练对Matlab和python的应用。 学习视频链接&#xff1a; https://www.bilibili.com/video/BV1EK41187QF?p36&vd_source67471d3a1b4f517b7a7964093e6…

Java线程模型

一、相关知识 用户级线程&#xff08;ULT&#xff09;&#xff1a;实现在用户空间的线程称为用户级线程。用户线程是完全建立在用户空间的线程库&#xff0c;用户线程的创建、调度、同步和销毁全由用户空间的库函数完成&#xff0c;不需要内核的参与&#xff0c;也不需要进行用…