【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.效果:


相关文章:
【vue3】【elementPlus】【国际化】
1.如需从0-1开始,请参考 https://blog.csdn.net/Timeguys/article/details/140995569 2.使用 vue-i18n 模块: npm i vue-i18n3.在 src 目录下创建 locales 目录,里面创建文件:en.js、zh-cn.js、index.js 语言js文件:…...
用python实现求两个整数的最大公约数
def gcd(a, b): """计算最大公约数""" while b: a, b b, a % b return abs(a) 下面是对 gcd 函数的逐行解释: def gcd(a, b):"""计算最大公约数"""定义函数:这里定义了一个名为 gcd…...
Linux 内核源码分析---proc 文件系统
proc文件系统 进程数据文件系统(process data filesystem, procfs)装载在 /proc,缩写为 procFS。 proc 文件系统是一种虚拟文件系统,其信息不能从块设备读取。只有在读取文件内容时才动态生成相应的信息。使用proc文件系统&…...
视频号直播回放怎么下载?
一、如果是下载自己直播回放视频: 方法一:视频号助手 打开网址:视频号助手 登陆账号后。下面路径,先点击成回放, 后就可以在下面路径,下载全场回放 但是这种有个缺点,就是不能分段下载。这样…...
【第九节】python中xml解析和json编解码
目录 一、Python XML 解析 1.1 什么是XML 1.2 Python 对 XML 的解析方法 1.3 SAX解析xml 1.4 xml.dom解析xml 1.6 ElementTree解析XML 二、Python编解码json 2.1 什么是json 2.2 使用json 库 2.3 使用第三方库Demjson 一、Python XML 解析 1.1 什么是XML XML&#x…...
yolo v8部署到云服务器问题记录
环境安装 1、运行项目报错:no python application found, check your startup logs for errors 在云服务器pytorch版本安装错了,安装了GPU版本,需要安装CPU版本 # CPU only 使用下面这段代码避免出现第二个错误 pip install torch2.3.1 to…...
端口被占用,杀死进程的步骤
一、 查看所有进程占用的端口 在开始-运行-cmd,输入:netstat –ano可以查看所有进程 二、查看占用指定端口的程序 查看被那个端口占用,可以用该命令: 三、使用命令杀死进程 杀死进程,使用命令:...
接口入门(企业常见使用,一分钟搞定版)
目录 1、接口的定义 定义位置 接口内容 2、接口的使用 正常实现接口 接口当做函数参数 匿名实现接口 3、OPPO便签接口具体分析 总结一下: 1、接口的定义 定义位置 可以写在类中,但注意现在接口名字是 类名.接口名 可以单独写在一个文件 接口内…...
深入解析:Cookie 与 Session 的区别及应用场景
引言 在Web开发中,Cookie 和 Session 是两种常用的用户状态管理机制。虽然它们的目标都是在无状态的HTTP协议中维护用户的状态,但它们的工作原理和适用场景却有所不同。在本文中,我们将深入探讨 Cookie 和 Session 的区别,并通过…...
LLM金融文本分类文档说明
Python注意事项: 1,创建虚拟环境: conda create --prefixD:\software\Anaconda3\envs\finance_analysis python3.10.4 conda create -p D:/software/anaconda3/envs/finance_analysis python3.10.4 注释: D:\software\anaconda3\e…...
EI检索,2天录用,3天见刊!截稿在即,这本水刊你还不投吗?
点击关注:关注GZH【欧亚科睿学术】,GET完整版2023JCR分区列表! 🎉 🎉 🎉 🎉 恭喜!这本毕业水刊仅2天录用!3天见刊! 重要时间节点如下 2024-08-03 Sub…...
sql获取过去的小时数
TIMESTAMPDIFF(HOUR, create_time, NOW()) AS pastHours 是一条 SQL 语句的一部分,它使用 TIMESTAMPDIFF 函数来计算两个时间点之间的差异,并将结果标记为 pastHours。 让我们详细解析一下这条语句: TIMESTAMPDIFF 函数: 这个函数用于计算两…...
【Android Studio】彻底卸载
文章目录 卸载程序控制面板卸载安全软件卸载 重启计算机删除文件重启计算机 我们在Android开发时涉及重装时,如果卸载不干净,再次安装是不会正常运行项目的,接下来就让我教你如何删除干净吧。 卸载程序 控制面板卸载 control控制面板一>…...
美术版权可以当做商标使用吗
美术版权与商标的区别及不可混用性分析 在知识产权领域,美术版权和商标权是两个重要的概念,它们各自承载着不同的法律意义和保护范围。 美术版权概述 美术版权,又称著作权,是指著作权人对其创作的美术作品所享有的权利。这些作品…...
控制某些请求不记录日志
说明:由于统一拦截日志请求,导致所有匹配的请求都会打印日志,这里需要控制有些请求执行不打印日志,比如定时每隔几秒执行某些请求。 具体实现如下: 一、自定义注解,如下: /** * Description: …...
Java线程池原理剖析和应用指南
目录 Java线程池详解一、Java线程池简介池化思想池化思想的优点 二、线程池的实现原理分析实现线程池需要考虑哪些问题?线程池的简单使用示例线程池原理的简单图示 三、Executor详解Executor简介Executor框架的继承结构总结ExecutorExecutorService 四、ThreadPoolE…...
ST-LINK烧录MCU
打开ST-LINK软件: 主板断电状态下接入烧录器,烧录器USB连接电脑: 主板上电,点击连接按钮: 点击加载文件: 点击写入按钮,烧录成功后拔掉烧录器,主板重新上电...
Go - 10. * 值类型和指针类型的差异
目录 一.引言 二.接收者类型 三.代码示例 1.指针接收者 2.值接收者 3.运行结果对比 4.代码修改 5.刨根问底 四.总结 一.引言 go 语言中 func (c *Title) 和 func (c Title) 两个方法的传参差一个 * 号,二者的区别是一个是指针类型,一个是值类型…...
waf绕过:网络安全狗绕过
引言: 所有的绕过原理都大致一致,但是并不是所有的绕过都能起到作用,渗透测试主要还是一个猜加试的过程,本文仅供参考 网络攻击或扫描绕过 1.get绕过(未开启cc防护) 网络安全狗的默认防护为,拒…...
Django中的模型小总结:
from django.db import models from django.urls import reverse# 自定义Manager方法 class HighRatingManager(models.Manager):def get_queryset(self):return super().get_queryset().filter(rating1)# CHOICES选项 class Rating(models.IntegerChoices):VERYGOOD 1, Very …...
tio 配置完全手册:从基础设置到高级配置档
tio 配置完全手册:从基础设置到高级配置档 【免费下载链接】tio A serial device I/O tool 项目地址: https://gitcode.com/gh_mirrors/ti/tio tio 是一款功能强大的串行设备 I/O 工具,能够帮助用户轻松管理和配置串行端口通信。本指南将从基础设…...
终极指南:如何快速掌握 Tooltipster 提示框插件的完整教程
终极指南:如何快速掌握 Tooltipster 提示框插件的完整教程 【免费下载链接】tooltipster A jQuery tooltip plugin 项目地址: https://gitcode.com/gh_mirrors/to/tooltipster Tooltipster 是一个灵活且功能强大的 jQuery 提示框插件,专为现代 We…...
SimpleX协议标准化之路:终极隐私通信的完整指南
SimpleX协议标准化之路:终极隐私通信的完整指南 SimpleX是全球首个完全不需要任何用户标识符的通信平台,为隐私保护设立了新的标准。作为100%隐私设计理念的先行者,SimpleX通过其革命性的协议架构,彻底改变了我们对安全通信的认知…...
流程图:符号背后的逻辑与高效设计技巧
1. 流程图符号的底层逻辑解析 第一次接触流程图时,很多人会被那些看似简单的图形符号搞得晕头转向。我刚开始画流程图时,经常把菱形和矩形搞混,结果画出来的流程图逻辑完全错乱。直到后来系统学习了符号背后的设计哲学,才发现每个…...
EcomGPT-7B电商大模型API接口安全设计
EcomGPT-7B电商大模型API接口安全设计 1. 引言 电商平台每天处理着海量的用户查询、商品信息和交易数据,这些数据不仅包含商业机密,还涉及大量用户隐私信息。想象一下,一个未经保护的API接口就像是一家没有门锁的金店,任何人都可…...
高并发订单处理全链路压测实录,从500TPS到12800TPS的性能跃迁,附可复用的PHP压力测试脚本与监控看板
第一章:高并发订单处理全链路压测实录,从500TPS到12800TPS的性能跃迁,附可复用的PHP压力测试脚本与监控看板面对大促期间瞬时流量洪峰,我们对核心订单服务实施了覆盖网关、认证中心、库存服务、支付回调及数据库写入的全链路压测。…...
Ubuntu 20.04下用Python3搞定Mininet可视化编辑器Miniedit(附报错修复指南)
Ubuntu 20.04下Python3运行Miniedit的完整解决方案 在Linux网络仿真领域,Mininet凭借其轻量级和高度可定制的特性,成为众多开发者和研究人员的首选工具。而Miniedit作为Mininet的可视化前端,本应让拓扑创建变得简单直观,但在Pytho…...
零基础部署Phi-4-mini推理模型:5分钟搞定数学解题AI助手
零基础部署Phi-4-mini推理模型:5分钟搞定数学解题AI助手 1. 为什么选择Phi-4-mini-reasoning? 数学解题和逻辑推理一直是AI领域的挑战性任务。传统的大型语言模型虽然功能强大,但部署成本高、响应速度慢。Phi-4-mini-reasoning作为微软推出…...
Linux操作系统进程(下)
Linux操作系统进程(下) 深入理解进程概念,了解PCB学习进程状态,创建进程,掌握僵尸进程和孤儿进程的形成和危害了解进程的调度,Linux进程优先级,理解进程竞争性与独立性 文章目录Linux操作系统进程(下)进程和PCB进程概…...
你的热电偶读数总跳?可能是50/60Hz工频干扰!STM32驱动MAX31856的滤波配置避坑指南
热电偶读数跳变?50/60Hz工频干扰的精准诊断与MAX31856滤波实战 工业现场的温度测量工程师们,是否经常遇到这样的困扰:明明硬件连接正确,STM32与MAX31856的驱动代码也按手册编写,但热电偶读数却像心电图一样上下跳动&am…...
