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

Vue3组合式API + TS项目中手写国际化插件

文章目录

    • 1. 在项目中创建一个国际化插件的文件i18n.ts
    • 2. 创建语言模块json
    • 3. 注册插件
    • 4. 语言切换组件
    • 5. 使用插件(ts中使用全局需注意点)

1. 在项目中创建一个国际化插件的文件i18n.ts

<!-- plugins/i18n.ts -->
export const i18nPlugin = {install(app: any, option: any) {app.config.globalProperties.$t = (key: string) => {return key.split(".").reduce((o, k) => {if (o) return o[k];}, option[localStorage.getItem("language") || "zhCN"]);} }
}

2. 创建语言模块json

<!-- assets/i18n/zh-CN.json -->
{"project": {"projectName": "项目名称"}
}
<!-- assets/i18n/en-US.json -->
{"project": {"projectName": "project name"}
}

3. 注册插件

import zhCN from "./assets/i18n/zh-CN.json";
import enUS from "./assets/i18n/en-US.json";
import { i18nPlugin } from "./plugins/i18n";const app = createApp(App);
app.use(i18nPlugin, {zhCN,enUS,
});

4. 语言切换组件

<!-- components/ChangeLanguage.vue -->
<template><a-select:value="language"@change="changeLanguage"><a-select-option value="zhCN">中文</a-select-option><a-select-option value="enUS">English</a-select-option></a-select>
</template><script lang="ts"setup>
import {ref} from "vue";// 将当前选择的语言存到localStorage中
const language = ref(localStorage.getItem("language") || "zhCN");
const changeLanguage = (value: string) => {language.value = value;localStorage.setItem("language", value);window.location.reload();
};
</script>

5. 使用插件(ts中使用全局需注意点)

<template><ChangeLanguage />
</template>
<!-- component.vue -->
<script lang="ts" setup>
import { getCurrentInstance } from "vue";
import SelectLanguage from "@/components/SelectLanguage.vue";// 通过getCurrentInstance()来获取当前组件实例
const instance = getCurrentInstance();
// 从当前组件实例中获取全局的 $t 函数
const $t = instance?.appContext.app.config.globalProperties.$t;// 调用全局的 $t 函数进行文本翻译
const translatedText = $t('project.projectName');
console.log(translatedText);
</script>

相关文章:

Vue3组合式API + TS项目中手写国际化插件

文章目录 1. 在项目中创建一个国际化插件的文件i18n.ts2. 创建语言模块json3. 注册插件4. 语言切换组件5. 使用插件(ts中使用全局需注意点) 1. 在项目中创建一个国际化插件的文件i18n.ts <!-- plugins/i18n.ts --> export const i18nPlugin {install(app: any, option:…...

深入解析Jackson的ObjectMapper:核心功能与方法指南

com.fasterxml.jackson.databind.ObjectMapper 是Jackson库的核心类&#xff0c;负责JSON序列化与反序列化的重任。本文旨在详细介绍其成员属性和方法&#xff0c;帮助开发者更好地利用Jackson进行Java对象与JSON数据之间的转换操作。 初始化与配置 构造与复制 默认构造函数…...

计算机是如何执行指令的

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…...

Jetson Orin NX L4T35.5.0平台相机stop导致系统死机问题调试

1. 环境 硬件:国产OrinNX套件 系统版本: L4T35.5.0 相机: SDI 相机,1080P50fps 2. 问题描述 移植驱动已经开始正常采集相机图像,但是会出现以下问题: 采集流程如下: (1)start SDI camera (2)gst-launch-1.0采集图像 gst-launch-1.0 v4l2src device=/dev/vide…...

【个人博客搭建】(18)使用Quartz.NET 定时备份数据库

Quartz.NET在系统主要承担的一些关键功能&#xff1a; 任务调度&#xff1a;Quartz.NET 允许开发人员创建、调度和管理定时任务&#xff0c;支持简单触发器和Cron表达式等多样化的触发策略。灵活性&#xff1a;Quartz.NET 提供了灵活的任务安排机制&#xff0c;不仅支持基于时间…...

【python】MVC架构

在Python中&#xff0c;Model-View-Controller (MVC) 是一种软件设计模式&#xff0c;常用于构建可维护性和可扩展性高的应用程序&#xff0c;尤其是在Web开发中。以下是 MVC 模式在 Python 中的组成部分和它们的主要职责&#xff1a; Model&#xff08;模型&#xff09;&…...

SVM单类异常值检测

SVM是一种广泛使用的分类器&#xff0c;通常用于二分类或多分类问题。然而&#xff0c;在异常点检测的场景中&#xff0c;我们通常会将数据视为一个类别&#xff08;即正常数据点&#xff09;&#xff0c;并尝试找到那些与正常数据点显著不同的点&#xff08;即异常点&#xff…...

前端动画总结

前端动画 一、css动画 transition 过渡 transition:transiton-property,transition-duration,transition-timing-function,transition-delay相关属性说明 属性默认值其他说明property过渡的属性all不是所有css属性都支持过渡duration动画完成时间0s单位是秒timing-functio…...

【源码阅读】 Golang中的database/sql库源码探究

文章目录 前言一、整体目录结构二、driver包1、驱动相关driver.Driver2、驱动连接&#xff1a;driver.Conn3、预处理结构&#xff1a;Stmt4、执行结果 driver.Result5、查询结果&#xff1a;driver.Rows6、driver.RowsAffected7、driver.Value8、Value定义转换相关 三、sql包1、…...

什么是容器微隔离 - 容器微隔离技术有哪些

如果您对容器安全有任何问题可以联系安全狗对您的容器进行安全防护。 容器微隔离是一种在容器化环境中实现安全隔离的技术。随着云计算和容器化技术的广泛应用&#xff0c;容器已成为企业IT架构中的重要组成部分。然而&#xff0c;随着容器数量的增加&#xff0c;容器之间的交…...

(成品论文22页)24深圳杯数学建模A题1-4问完整代码+参考论文重磅更新!!!!

论文如下&#xff1a; 基于三球定位的多个火箭残骸的准确定位 针对问题一&#xff1a;为了进行单个残骸的精确定位&#xff0c;确定单个火箭残骸发生音爆 时的精确位置和时间&#xff0c;本文基于三球定位模型&#xff0c;考虑到解的存在性和唯一性&#xff0c; 选取了四个监测…...

ThreeJs模拟工厂生产过程八

这节算是给这个车间场景收个尾&#xff0c;等了几天并没有人发设备模型给我&#xff0c;只能自己找了一个凑合用了。加载模型之前&#xff0c;首先要把货架上的料箱合并&#xff0c;以防加载模型之后因模型数量多出现卡顿&#xff0c;方法和之前介绍的合并传送带方法相同&#…...

[Unity实战]热更新如何预防过度裁剪

情景再现 假设你现在有一个游戏客户端&#xff0c;客户端只打包了入口场景&#xff0c;游戏场景都存放在了AB包。 你打的热更包里使用了协程中的waituntil修复游戏场景中空投补给资源加载时机问题&#xff0c;但是打出来的热更在真机跑报如下错误&#xff1a; TypeLoadExcep…...

任务修复实例(8)

Quest Name Counterattack! | 人马无双&#xff01; Quest ID 4021 -- Adjust Conditions UPDATE world.conditions SET ConditionValue2 8, Comment Regthar Deathgate - On Quest State - Gossip Menu Option Available WHERE SourceTypeOrReferenceId 15 AND Source…...

torch.flatten(x, 1)”和“x.view(x.size(0), -1)”有什么区别?

这两个操作在 PyTorch 中都用于将张量展平为一维。它们的主要区别在于实现方式和适用情况&#xff1a; torch.flatten(x, 1)&#xff1a; 这是一个函数调用&#xff0c;其中 x 是输入张量&#xff0c;1 是指定要展平的起始维度。此函数会将张量 x 从指定的起始维度开始展平&…...

达梦主从数据库实例恢复

测试环境&#xff1a;实时主备数据库 1、在节点1向测试表aaa插入数据 如图可见&#xff0c;会话139695153554808向aaa表插入了10000行数据。事务id460520。 2、提交前在另一个窗口kill掉dmserver进程。 3、查看节点2的数据库日志 上图可见&#xff0c;系统执行alter database…...

JAVA:jsp+springboot 配置maven兼容版本

Java17 maven依赖&#xff1a;如果中央库和其他镜像找不到包&#xff0c; 可以访问下面的网址找替代包 <!-- Maven Repository: Search/Browse/Explore (mvnrepository.com) -->spring-boot版本号3.2.51.无需配置驱动&#xff0c;有内置数据库驱动 2.能自动扫描配置类。b…...

【Docker】docker部署lnmp和搭建wordpress网站

环境准备 docker&#xff1a;192.168.67.30 虚拟机&#xff1a;4核4G systemctl stop firewalld systemctl disable firewalld setenforce 0 安装docker #安装依赖包 yum -y install yum-utils device-mapper-persistent-data lvm2 #设置阿里云镜像 yum-config-manager --add…...

C#装箱拆箱是怎么回事

代码如下&#xff1a; int i 123; object o i; // Boxing int j (int)o; // Unboxing 缺点&#xff1a; 当装箱和拆箱发生时&#xff0c;该技术允许将值类型视为对象。虽然非常有益&#xff0c;但它们会带来性能开销。值类型和引用类型之间的转换过多可能会导致垃圾回收…...

JavaEE 初阶篇-深入了解 Junit 单元测试框架和 Java 中的反射机制(使用反射做一个简易版框架)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 Junit 单元测试框架概述 1.1 使用 Junit 框架进行测试业务代码 1.2 Junit 单元测试框架的常用注解&#xff08;Junit 4.xxx 版本&#xff09; 2.0 反射概述 2.1 获…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

【JavaEE】-- HTTP

1. HTTP是什么&#xff1f; HTTP&#xff08;全称为"超文本传输协议"&#xff09;是一种应用非常广泛的应用层协议&#xff0c;HTTP是基于TCP协议的一种应用层协议。 应用层协议&#xff1a;是计算机网络协议栈中最高层的协议&#xff0c;它定义了运行在不同主机上…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

让AI看见世界:MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

【深度学习新浪潮】什么是credit assignment problem?

Credit Assignment Problem(信用分配问题) 是机器学习,尤其是强化学习(RL)中的核心挑战之一,指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中,智能体执行一系列动作后获得一个最终奖励,但每个动作对最终结果的贡献程度往往…...

[特殊字符] 手撸 Redis 互斥锁那些坑

&#x1f4d6; 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作&#xff0c;想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁&#xff0c;也顺便跟 Redisson 的 RLock 机制对比了下&#xff0c;记录一波&#xff0c;别踩我踩过…...