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

vue3 vue-i18n 多语言

1. 安装 

npm install vue-i18n -s

2. 引入main.js

import { createI18n } from 'vue-i18n'
import messages from './i18n/index'
const i18n = createI18n({legacy: false,locale: Cookies.get('language') || 'en_us', // set localefallbackLocale: 'en_us', // set fallback localemessages: messages
})
app.use(i18n)

3. 新建文件index.js

import en_us from "@/i18n/en_us.js";
import zh_cn from "@/i18n/zh_cn.js";export default {en_us,zh_cn
}

4. 新建文件en_us.js

export default {login: {username: 'username'}
}

5. 新建文件zh_cn.js

export default {login: {username: '用户名'}
}

6. 使用

<script>
import {useI18n} from "vue-i18n";const {t} = useI18n()const data = ref({rules: {label: [{required: true, message: t('login.username'), trigger: "blur"}],value: [{required: true, message: t('login.username'), trigger: "blur"}]}
});</script><template><div>{{ t('login.username') }}</div>
</template>

7. 语言切换

<script>
import {useI18n} from 'vue-i18n'
import Cookies from "js-cookie";const {t, locale} = useI18n()const handleSetLanguage = (language) => {Cookies.set('language', language)locale.value = language;
}</script><template><div><el-dropdown @command="handleSetLanguage">// 这里去 阿里巴巴矢量图标库 找个图贴一下就行<template #dropdown><el-dropdown-menu><el-dropdown-item :command="'en_us'">English</el-dropdown-item><el-dropdown-item :command="'zh_cn'">简体中文</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></template>

8. 样式

iconfont-阿里巴巴矢量图标库

相关文章:

vue3 vue-i18n 多语言

1. 安装 npm install vue-i18n -s 2. 引入main.js import { createI18n } from vue-i18n import messages from ./i18n/index const i18n createI18n({legacy: false,locale: Cookies.get(language) || en_us, // set localefallbackLocale: en_us, // set fallback local…...

二级水平导航菜单栏的实现

1. 这个是本人设计的一带一路的二级水平导航栏HTML代码&#xff1b; 这里最后实现的效果是鼠标悬停在导航栏上面&#xff0c;就会显示下面的4个部分页面&#xff0c;这里只是以评论热 点作为例子&#xff0c;其他的类似&#xff1b; 2.首先要设计DIV&#xff0c;然后利用无…...

在GitLab Python库中,mr.changes()和mr.diffs()的区别

在GitLab Python库中&#xff0c;mr.changes()和mr.diffs()都用于获取合并请求&#xff08;Merge Request&#xff09;中的文件更改信息&#xff0c;但它们之间有一些区别&#xff1a; mr.changes()&#xff1a; mr.changes() 方法返回合并请求中所有文件的更改信息。返回的结果…...

JavaScript | 【讨论】微软早在2022年已经停用ie的今天,js开发还需要考虑ie9以下的情况嘛?

CSDN的C知道机器回复&#xff1a; 在进行JavaScript开发时&#xff0c;通常需要考虑IE9以下的况。尽管IE9以下的浏览器在市场份额上逐渐减少&#xff0c;但仍然有一部分用户在使用这些旧版本的浏览器。为了确保网站或应用在这些浏览器上能够正常运行&#xff0c;以下是一些需要…...

网康科技 NS-ASG 应用安全网关 SQL注入漏洞复现(CVE-2024-2022)

0x01 产品简介 网康科技的NS-ASG应用安全网关是一款软硬件一体化的产品,集成了SSL和IPSec,旨在保障业务访问的安全性,适配所有移动终端,提供多种链路均衡和选择技术,支持多种认证方式灵活组合,以及内置短信认证、LDAP令牌、USB KEY等多达13种认证方式。 0x02 漏洞概述 …...

英福康INFICON软件真空Tware32中文操作手册

英福康INFICON软件真空Tware32中文操作手册...

UnityAPI的学习——Quaternion类

Quaternion又称为四元数&#xff0c;由x、y、z和w这4个分量组成&#xff0c;属于struct类型。 在Unity中&#xff0c;用Quaternion来存储和表示对象的旋转角度。 Quaternion类实例属性 在Quaternion类中&#xff0c;涉及的实例属性主要有eulerAngles eulerAngles属性&#x…...

chromedriverUnable to obtain driver for chrome using ,selenium找不到chromedriver

1、下载chromedriver chromedriver下载网址&#xff1a;CNPM Binaries Mirror 老版本在&#xff1a;chromedriver/ 较新版本在&#xff1a;chrome-for-testing/ 2、设置了环境变量还是找不到chromedriverUnable to obtain driver for chrome using NoSuchDriverException:…...

剑指offer面试算法题目,自己总结的

JZ31 栈的压入、弹出序列-C++-CSDN博客 剑指 Offer(C++版本)系列:从尾到头打印单链表(C++)-CSDN博客 剑指offer》15--二进制中1的个数[C++]-CSDN博客 《剑指offer》14--剪绳子(整数拆分)[C++]-CSDN博客 剑指 Offer 12. 矩阵中的路径-CSDN博客 C++--机器人的运动范围…...

原生IP是什么?如何测试代理是不是原生IP?

一、什么是原生IP 原生IP地址是互联网服务提供商&#xff08;ISP&#xff09;直接分配给用户的真实IP地址&#xff0c;无需代理或转发。这类IP的注册国家与IP所在服务器的注册地相符。这种IP地址直接与用户的设备或网络关联&#xff0c;不会被任何中间服务器或代理转发或隐藏。…...

1、MQ_介绍、优缺点、类型等

MQ介绍 1. MQ概述 MQ&#xff08;Message Queue&#xff09;&#xff1a;消息队列&#xff0c;是基础数据结构中FIFO&#xff08;first in first out&#xff09;的一种数据结构。一般用来解决流量削峰、应用解耦、异步处理等问题&#xff0c;实现高性能&#xff0c;高可用&a…...

Go-gin-example 第三部分 编写一个简单的文件日志系统

文章目录 本文目标新建logging包file.go编写log文件当前目录结构 接入自定义的log功能验证功能 本文目标 在上一节中&#xff0c;我们解决了 API’s 可以任意访问的问题&#xff0c;那么我们现在还有一个问题&#xff0c;就是我们的日志&#xff0c;都是输出到控制台上的&…...

SQL中如何添加数据

SQL中如何添加数据 一、SQL中如何添加数据&#xff08;方法汇总&#xff09;二、SQL中如何添加数据&#xff08;方法详细解说&#xff09;1. 使用SQL脚本&#xff08;推荐&#xff09;1.1 在表中插入1.1.1 **第一种形式**1.1.2 **第二种形式**SQL INSERT INTO 语法示例SQL INSE…...

如何更好的理解设计模式之桥接模式

桥接模式 点奶茶的时候, 我们一般选择原味奶茶/牛奶奶茶/咸味奶茶 现在假设我们也有这些已经实现好的奶茶类, 且这个奶茶类仅仅就是一个类, 什么也没有, 不可改动 类似 class 奶茶{ }class 原味奶茶 extends 奶茶{ }但是奶茶也分大杯奶茶, 中杯奶茶, 小杯奶茶, 如果我们要实现…...

归并排序

参考链接 排序算法&#xff1a;归并排序【图解代码】_哔哩哔哩_bilibili #include <stdio.h> #include <stdlib.h>// 合并 void merge(int arr[], int tempArr[], int left, int mid, int right) {// 标记左半区第一个未排序的元素int l_pos left;// 标记右半区…...

ELF 1技术贴|在NXP源码基础上适配开发板的按键功能

本次源代码适配是在NXP i.MX6ULL EVK评估板的Linux内核源代码&#xff08;特定版本号为Linux-imx_4.1.15&#xff09;的基础中展开的。 首要任务集中在对功能接口引脚配置的精细调整&#xff0c;确保其能无缝匹配至ELF 1开发板。接下来&#xff0c;我们将详细阐述适配过程中关…...

Linux:kubernetes(k8s)pod的基础操作(6)

Linux&#xff1a;kubernetes&#xff08;k8s&#xff09;允许在任意节点使用kubectl命令&#xff08;5&#xff09;-CSDN博客https://blog.csdn.net/w14768855/article/details/136460090?spm1001.2014.3001.5501 我在前两张进行了基础环境的一系列搭建&#xff0c;现在就正…...

【Docker】掌握 Docker 镜像操作:从基础到进阶

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;Linux ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 结语 我的其他博客 前言 在现代软件开发和部署中&#xff0c;容器化技术已经成为不可或缺的一部分。而 Docker 作为最流行的容器化…...

flink重温笔记(十一):Flink 高级 API 开发——flink 四大基石之 Checkpoint(详解存储后端)

Flink学习笔记 前言&#xff1a;今天是学习 flink 的第 11 天啦&#xff01;学习了 flink 四大基石之 Checkpoint &#xff08;检查点&#xff09;&#xff0c;主要是解决大数据领域持久化中间结果数据&#xff0c;以及取消任务&#xff0c;下次启动人可以恢复累加数据问题&…...

React富文本编辑器开发(九)位置

位置是指在使用Slate编辑器中进行插入、删除或执行其它操作时引用文档中特定位置的方式。有几种不同类型的位置接口&#xff0c;每种接口都用于不同的用例。 Path路径 路径是引用位置的最低级别的方法。每个路径都是一个简单的数字数组&#xff0c;它通过文档树下每个祖先节点…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

Oracle11g安装包

Oracle 11g安装包 适用于windows系统&#xff0c;64位 下载路径 oracle 11g 安装包...

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...