当前位置: 首页 > news >正文

【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开始&#xff0c;请参考 https://blog.csdn.net/Timeguys/article/details/140995569 2.使用 vue-i18n 模块&#xff1a; npm i vue-i18n3.在 src 目录下创建 locales 目录&#xff0c;里面创建文件&#xff1a;en.js、zh-cn.js、index.js 语言js文件&#xff1a;…...

用python实现求两个整数的最大公约数

def gcd(a, b): """计算最大公约数""" while b: a, b b, a % b return abs(a) 下面是对 gcd 函数的逐行解释&#xff1a; def gcd(a, b):"""计算最大公约数"""定义函数&#xff1a;这里定义了一个名为 gcd…...

Linux 内核源码分析---proc 文件系统

proc文件系统 进程数据文件系统&#xff08;process data filesystem, procfs&#xff09;装载在 /proc&#xff0c;缩写为 procFS。 proc 文件系统是一种虚拟文件系统&#xff0c;其信息不能从块设备读取。只有在读取文件内容时才动态生成相应的信息。使用proc文件系统&…...

视频号直播回放怎么下载?

一、如果是下载自己直播回放视频&#xff1a; 方法一&#xff1a;视频号助手 打开网址&#xff1a;视频号助手 登陆账号后。下面路径&#xff0c;先点击成回放&#xff0c; 后就可以在下面路径&#xff0c;下载全场回放 但是这种有个缺点&#xff0c;就是不能分段下载。这样…...

【第九节】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、运行项目报错&#xff1a;no python application found, check your startup logs for errors 在云服务器pytorch版本安装错了&#xff0c;安装了GPU版本&#xff0c;需要安装CPU版本 # CPU only 使用下面这段代码避免出现第二个错误 pip install torch2.3.1 to…...

端口被占用,杀死进程的步骤

一、 查看所有进程占用的端口 在开始-运行-cmd,输入&#xff1a;netstat –ano可以查看所有进程 二、查看占用指定端口的程序 查看被那个端口占用&#xff0c;可以用该命令&#xff1a; 三、使用命令杀死进程 杀死进程&#xff0c;使用命令&#xff1a;...

接口入门(企业常见使用,一分钟搞定版)

目录 1、接口的定义 定义位置 接口内容 2、接口的使用 正常实现接口 接口当做函数参数 匿名实现接口 3、OPPO便签接口具体分析 总结一下&#xff1a; 1、接口的定义 定义位置 可以写在类中&#xff0c;但注意现在接口名字是 类名.接口名 可以单独写在一个文件 接口内…...

深入解析:Cookie 与 Session 的区别及应用场景

引言 在Web开发中&#xff0c;Cookie 和 Session 是两种常用的用户状态管理机制。虽然它们的目标都是在无状态的HTTP协议中维护用户的状态&#xff0c;但它们的工作原理和适用场景却有所不同。在本文中&#xff0c;我们将深入探讨 Cookie 和 Session 的区别&#xff0c;并通过…...

LLM金融文本分类文档说明

Python注意事项&#xff1a; 1&#xff0c;创建虚拟环境&#xff1a; conda create --prefixD:\software\Anaconda3\envs\finance_analysis python3.10.4 conda create -p D:/software/anaconda3/envs/finance_analysis python3.10.4 注释&#xff1a; D:\software\anaconda3\e…...

EI检索,2天录用,3天见刊!截稿在即,这本水刊你还不投吗?

点击关注&#xff1a;关注GZH【欧亚科睿学术】&#xff0c;GET完整版2023JCR分区列表&#xff01; &#x1f389; &#x1f389; &#x1f389; &#x1f389; 恭喜&#xff01;这本毕业水刊仅2天录用&#xff01;3天见刊&#xff01; 重要时间节点如下 2024-08-03 Sub…...

sql获取过去的小时数

TIMESTAMPDIFF(HOUR, create_time, NOW()) AS pastHours 是一条 SQL 语句的一部分&#xff0c;它使用 TIMESTAMPDIFF 函数来计算两个时间点之间的差异&#xff0c;并将结果标记为 pastHours。 让我们详细解析一下这条语句&#xff1a; TIMESTAMPDIFF 函数: 这个函数用于计算两…...

【Android Studio】彻底卸载

文章目录 卸载程序控制面板卸载安全软件卸载 重启计算机删除文件重启计算机 我们在Android开发时涉及重装时&#xff0c;如果卸载不干净&#xff0c;再次安装是不会正常运行项目的&#xff0c;接下来就让我教你如何删除干净吧。 卸载程序 控制面板卸载 control控制面板一>…...

美术版权可以当做商标使用吗

美术版权与商标的区别及不可混用性分析 在知识产权领域&#xff0c;美术版权和商标权是两个重要的概念&#xff0c;它们各自承载着不同的法律意义和保护范围。 美术版权概述 美术版权&#xff0c;又称著作权&#xff0c;是指著作权人对其创作的美术作品所享有的权利。这些作品…...

控制某些请求不记录日志

说明&#xff1a;由于统一拦截日志请求&#xff0c;导致所有匹配的请求都会打印日志&#xff0c;这里需要控制有些请求执行不打印日志&#xff0c;比如定时每隔几秒执行某些请求。 具体实现如下&#xff1a; 一、自定义注解&#xff0c;如下&#xff1a; /** * Description: …...

Java线程池原理剖析和应用指南

目录 Java线程池详解一、Java线程池简介池化思想池化思想的优点 二、线程池的实现原理分析实现线程池需要考虑哪些问题&#xff1f;线程池的简单使用示例线程池原理的简单图示 三、Executor详解Executor简介Executor框架的继承结构总结ExecutorExecutorService 四、ThreadPoolE…...

ST-LINK烧录MCU

打开ST-LINK软件&#xff1a; 主板断电状态下接入烧录器&#xff0c;烧录器USB连接电脑&#xff1a; 主板上电&#xff0c;点击连接按钮&#xff1a; 点击加载文件&#xff1a; 点击写入按钮&#xff0c;烧录成功后拔掉烧录器&#xff0c;主板重新上电...

Go - 10. * 值类型和指针类型的差异

目录 一.引言 二.接收者类型 三.代码示例 1.指针接收者 2.值接收者 3.运行结果对比 4.代码修改 5.刨根问底 四.总结 一.引言 go 语言中 func (c *Title) 和 func (c Title) 两个方法的传参差一个 * 号&#xff0c;二者的区别是一个是指针类型&#xff0c;一个是值类型…...

waf绕过:网络安全狗绕过

引言&#xff1a; 所有的绕过原理都大致一致&#xff0c;但是并不是所有的绕过都能起到作用&#xff0c;渗透测试主要还是一个猜加试的过程&#xff0c;本文仅供参考 网络攻击或扫描绕过 1.get绕过&#xff08;未开启cc防护&#xff09; 网络安全狗的默认防护为&#xff0c;拒…...

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 …...

Modbus通信调试难题困扰你?这款开源工具让你轻松成为工业自动化专家

Modbus通信调试难题困扰你&#xff1f;这款开源工具让你轻松成为工业自动化专家 【免费下载链接】ModbusTool A modbus master and slave test tool with import and export functionality, supports TCP, UDP and RTU. 项目地址: https://gitcode.com/gh_mirrors/mo/ModbusT…...

多尺度卷积MCNN和它的一些组合体,MATLAB代码,几个小创新故障诊断模型,

本期带来在故障诊断领域用的比较多的、且效果比较好的一个故障诊断模型---多尺度卷积神经网络MCNN(multi-scale convolutional neural network) 为了方便大家的学习&#xff0c;本期整理了MCNN相关的不同组合网络&#xff1a; 一次性获取上述模型&#xff0c;获取方式移步文章末…...

1222万人同台竞技——这套AI工具组合,正在帮更多毕业生把简历捞率翻倍

2026届高校毕业生规模预计达1222万人&#xff0c;创历史新高。在这个数字背后&#xff0c;是更多人在同一个时间窗口、竞争有限的岗位机会。如何在同等条件下&#xff0c;让自己的求职路走得更快、更准、更稳&#xff0c;是2026春招最核心的命题。 这篇文章&#xff0c;我们想…...

赋能每一份热爱,你的专属AI创作伙伴「小加同学」来了!

这个时代&#xff0c;「把热爱做成事业」很难吗&#xff1f;有深耕内容的自媒体人&#xff0c;熬到深夜写文调图&#xff0c;却总难抓住流量密码&#xff1b;有奔走忙碌的OPC创业者&#xff0c;对需求、理素材、出方案&#xff0c;被琐事消磨&#xff1b;有坚守初心的中小商家&…...

一些算法题的反思总结

1.技巧总结有序———想二分连续———①滑动窗口② DP&#xff08;dp[i]表示以i结尾的xxxxx&#xff09;③前缀和&#xff0c;f(ij)-f(i)重复——哈希/Counter/defaultdict子问题——1️⃣递归&#xff0c;先定义结束如何退出&#xff0c;再考虑当前值怎么做2️⃣动态规划&…...

ChatTTS语音导航优化:车载系统更人性化播报

ChatTTS语音导航优化&#xff1a;车载系统更人性化播报 1. 引言&#xff1a;让车载导航真正"会说话" 你有没有遇到过这样的情况&#xff1a;开车时听着机械冰冷的导航语音&#xff0c;感觉像是在听机器人念经&#xff1f;"前方300米右转"、"请保持直…...

Qwen3.5-9B多模态能力展示:上传交通监控截图→识别违章行为→生成处罚依据

Qwen3.5-9B多模态能力展示&#xff1a;上传交通监控截图→识别违章行为→生成处罚依据 1. 多模态AI在交通管理中的创新应用 想象一下这样的场景&#xff1a;交通执法人员每天需要查看数百张监控截图&#xff0c;手动识别违章行为并查找相关法规条款。这不仅耗时耗力&#xff…...

MusePublic圣光艺苑保姆级指南:日志分析与生成失败归因定位方法

MusePublic圣光艺苑保姆级指南&#xff1a;日志分析与生成失败归因定位方法 1. 引言&#xff1a;当艺术创作遇到技术挑战 在MusePublic圣光艺苑这个充满诗意的AI艺术创作空间中&#xff0c;即使是最优雅的"挥毫泼墨"过程也可能遇到技术问题。当你的"绘意"…...

Vivado里给UltraScale FPGA的MGT分时钟,为啥隔壁SLR的Bank死活不认?

Vivado调试手记&#xff1a;破解UltraScale FPGA跨SLR时钟共享难题 第一次在Vivado里看到"ERROR: [DRC 23-20] GT_COMMON placement violation"这个红色报错时&#xff0c;我盯着屏幕愣了三分钟——明明在7系列FPGA上运行良好的参考时钟共享方案&#xff0c;怎么换到…...

蓝牙与WiFi之外:为机器人选择合适的近距离无线通信技术

在现代机器人系统中&#xff0c;无线通信不仅是遥控与数据回传的通道&#xff0c;更是实现多机协同、环境感知和人机交互的神经中枢。然而&#xff0c;面对琳琅满目的无线技术——经典蓝牙&#xff08;Bluetooth Classic&#xff09;、低功耗蓝牙&#xff08;BLE&#xff09;、…...