批量给元素添加进场动画；获取文本光标位置；项目国际化

批量给元素添加进场动画

api及参数参考：https://juejin.cn/post/7310977323484971071

简单实现：

addAnimationClass(){//交叉观察器if (window?.IntersectionObserver) {//获取所有需要添加进场动画的元素，放到一个数组let items = [...document.getElementsByClassName('need-fide-in')]let io = new IntersectionObserver(entries => {entries.forEach(item => {if (item.isIntersecting) {//给元素加上进场动画的类名item.target.classList.add('fade-in-animation')//取消对元素的观察（添加已完成）io.unobserve(item.target)}})}, {root: null,//根元素，根据这个元素的范围来监听，默认是视口rootMargin: '0px 0px 0px 0px', //监听的扩大范围，上右下左，必须要设置root才生效threshold: 0 // 阀值，出现程度为多少[0, 1]})//观察数组里的所有元素items.forEach(item => io.observe(item))//可以移除对所有元素的监听// observe.disconnect();//可以返回所有被观察的对象，返回值是数组// observer.takeRecords();}
},

.fade-in-animation{animation: fidein 0.7s linear;
}
@keyframes fidein{from {opacity: 0;transform: translate3d(0px, 90px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;}to {opacity: 1;transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);transform-style: preserve-3d;}
}

使用scrollIntoView时页面底部会出现空白

原本的实现是用了scrollIntoView，但是发现block设置为top或者center的时候页面底部会出现空白，只有nearst不会，但是目标内容在视线最底部，效果又不太好

document.getElementById('block').scrollIntoView({behavior: 'auto',block: 'center',
})

换成了vue-scroll，并将ref属性设置为scroll, srcoll.value就是获取到vueScroll元素

scroll.value.setScrollTop(element.getBoundingClientRect().top - 容器高度 / 2 + 元素element本身高度)

获取/设置问本中光标位置

获取：

function getCursorPosition = (element: any) => {try {let caretOffset = 0;const doc = element.ownerDocument || element.document;const win = doc.defaultView || doc.parentWindow;let sel;if (typeof win.getSelection != "undefined") {//谷歌、火狐sel = win.getSelection();if (sel.rangeCount > 0) {//选中的区域const range = win.getSelection().getRangeAt(0);const preCaretRange = range.cloneRange();//克隆一个选中区域preCaretRange.selectNodeContents(element);//设置选中区域的节点内容为当前节点preCaretRange.setEnd(range.endContainer, range.endOffset);  //重置选中区域的结束位置caretOffset = preCaretRange.toString().length;}} else if ((sel = doc.selection) && sel.type != "Control") {//IEconst textRange = sel.createRange();const preCaretTextRange = doc.body.createTextRange();preCaretTextRange.moveToElementText(element);preCaretTextRange.setEndPoint("EndToEnd", textRange);caretOffset = preCaretTextRange.text.length;}return caretOffset;} catch (e) {return 0;}
}

设置：

function setCaretPosition(element, pos) {let range, selection;range = document.createRange();//创建一个选中区域// range.selectNodeContents(element);//选中节点的内容if(element.innerHTML.length > 0) {range.setStart(element.childNodes[0], pos); //设置光标起始为指定位置range.setEnd(element.childNodes[0], pos); //设置光标起始为指定位置}range.collapse(true);       //设置选中区域为一个点selection = window.getSelection();//获取当前选中区域selection.removeAllRanges();//移出所有的选中范围selection.addRange(range);//添加新建的范围// 设置最后光标对象isPosition.value = selection.getRangeAt(0);
}

Vue项目国际化

文档地址：https://vue-i18n.intlify.dev/guide/

  1. 配置locales文件夹里的内容：一个index.js的入口文件和各语言的json文件

    index文件内容：

    import { createI18n } from "vue-i18n";
import en from "./en.json";
import cn from "./zh.json";const i18n = createI18n({legacy: false,locale: process.env.VUE_APP_LANG, // set localemessages: {en,cn,},
});export default i18n;

  2. 项目引用main.ts中

    import i18n from "./locales";
const app = createApp(App);app.use(i18n);
app.mount("#app");

  3. 配置打包脚本

    build.sh：

    # 创建 dist 文件夹，如果存在 dist 文件夹则先删除再创建
if  [ -e "dist" ]; thenrm -rf distmkdir dist
elsemkdir dist
fi# 每种语言都打包一次。ubuntu系统，可能对此行报括号错误，规避处理：在终端执行 dpkg-reconfigure dash，选择no。
# dash，选择no之后，系统的shell会使用bash，bash会降低ubuntu系统性能。所以，可以应优先通过 bash build.sh执行脚本。
# dash for debian。bash则支持更多语法。
langList=(en cn)
for item in ${langList[*]}; doecho 'build for '$item' in ('${langList[*]}')'export VUE_APP_LANG="$item"npm run build
done

  4. 按需设置网站语言，seo等

    <link rel="alternate" href="https://xx.com" hrefLang="x-default"/>
<link rel="alternate" href="https://xx.com/cn" hrefLang="zh-Hans"/>

    //获取国际化选择语言，用于项目跳转。优先级：localStorage中的语言信息 > url地址语言信息 > 浏览器语言
utils.getWebLanguage = function () {let lang: string | null = "en";//预渲染只看地址中的参数if (!(!window.__PRERENDER_INJECTED || window.__PRERENDER_INJECTED.isPrerender !== true)) {if (window.location.pathname && window.location.pathname !== "/") {//地址栏中携带了语言参数const pathArray = window.location.pathname.split("/");for (let i = 0; i < webLangList.length; i++) {if (webLangList[i].langCode.toLowerCase() === pathArray[1]) {lang = pathArray[1];break;}}}return lang}const LangList = webLangList;let isExist = true;//本地有存储的语言if (localStorage.getItem(constants.WEB_CHOOSE_LANGUAGE)) {lang = localStorage.getItem(constants.WEB_CHOOSE_LANGUAGE);isExist = false;} else if (window.location.pathname && window.location.pathname !== "/") {//地址栏中携带了语言参数const pathArray = window.location.pathname.split("/");for (let i = 0; i < webLangList.length; i++) {if (webLangList[i].langCode.toLowerCase() === pathArray[1]) {lang = pathArray[1];isExist = false;break;}}}if (isExist) {//浏览器默认语言参数for (let i = 0; i < LangList.length; i++) {let flag = "";if (navigator.language == "zh-TW" || navigator.language == "zh-HK") {flag = "tw";} else if (navigator.language == "zh-CN" || navigator.language == "zh") {flag = "cn";} else {flag = navigator.language.substring(0, 2).toLowerCase();}if (LangList[i].langCode.toLowerCase() === flag) {lang = LangList[i].langCode.toLowerCase();break;}}}return lang;
};//获取挂载时的语言参数
utils.getMountLanguage = function () {const chosenLang = utils.getWebLanguage();const url = window.location.href;const routePath = window.location.pathname === "/" ? "" : window.location.pathname;const searchParams = window.location.search;const pathArray = routePath.split("/");let path = routePath;let isExist = -1;if (pathArray.length > 1) {isExist = webLangList.findIndex(item => {return pathArray[1] == item.langCode;});}if (isExist !== -1) {const langCode = webLangList[isExist].langCode;path = routePath.substring(langCode.length + 1, routePath.length + 1);}if (chosenLang !== "en") {if (!url.includes(`/${chosenLang}`)) {window.location.href = `${window.location.origin}/${chosenLang}${path}${searchParams}`;}} else if (chosenLang == "en"){if (isExist !== -1) {window.location.href = `${window.location.origin}${path}`;}}
};

  5. nginx网站配置，新增location /语种

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

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

相关文章

CMU和ETH联合研发了一个名为 「敏捷但安全」的新框架，为四足机器人在复杂环境中实现高速运动提供了解决方案

CMU和ETH联合研发了一个名为 「敏捷但安全」的新框架，为四足机器人在复杂环境中实现高速运动提供了解决方案

在高速机器人运动领域&#xff0c;实现同时兼顾速度和安全一直是一大挑战。但现在&#xff0c;卡内基梅隆大学&#xff08;CMU&#xff09;和苏黎世联邦理工学院&#xff08;ETH&#xff09;的研究团队带来了突破性进展。他们开发的新型四足机器人算法&#xff0c;不仅能在复杂…
阅读更多...
集团企业大数据应用：突破痛点，释放数据价值

集团企业大数据应用：突破痛点，释放数据价值

在数字经济日益崛起的背景下&#xff0c;集团企业以其管理范围广泛、业务领域多元化和分支机构复杂化的特性&#xff0c;在市场竞争中扮演着重要角色。为了维持和提升这种竞争力&#xff0c;大数据应用成为了集团企业不可或缺的战略工具。然而&#xff0c;在实际应用中&#xf…
阅读更多...
linux ubuntu Mysql 安装指南

linux ubuntu Mysql 安装指南

第一部分安装&#xff1a; 步骤 1: 更新 apt 软件包索引 在开始安装之前&#xff0c;建议先更新 apt 软件包索引&#xff0c;以确保你安装的软件版本是最新的&#xff1a; sudo apt update步骤 2: 安装 MySQL 服务器 运行以下命令来安装 MySQL 服务器软件包&#xff1a; s…
阅读更多...
使用MinIO S3存储桶备份Weaviate

使用MinIO S3存储桶备份Weaviate

Weaviate 是一个开创性的开源向量数据库&#xff0c;旨在通过利用机器学习模型来增强语义搜索。与依赖关键字匹配的传统搜索引擎不同&#xff0c;Weaviate 采用语义相似性原则。这种创新方法将各种形式的数据&#xff08;文本、图像等&#xff09;转换为矢量表示形式&#xff0…
阅读更多...
单片机学习笔记---直流电机驱动（PWM）

单片机学习笔记---直流电机驱动（PWM）

直流电机介绍 直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极&#xff0c;当电极正接时&#xff0c;电机正转&#xff0c;当电极反接时&#xff0c;电机反转 直流电机主要由永磁体&#xff08;定子&#xff09;、线圈&#xff08;转子&#xff09;和换向器…
阅读更多...
ModuleNotFoundError: No module named ‘torchvision.models.utils‘报错的一种解决方法

ModuleNotFoundError: No module named ‘torchvision.models.utils‘报错的一种解决方法

最近在做一个BEV项目&#xff0c;在配置环境的时候&#xff0c;遇到了报错的一个问题&#xff1a; ModuleNotFoundError: No module named ‘torchvision.models.utils’ 我开始以为是我没有安装torchvision pip install torchvision -i http://pypi.douban.com/simple输入这…
阅读更多...
PCL的fromROSMsg()和toROSMsg()不能正确处理xyz之外其他field的数据长度

PCL的fromROSMsg()和toROSMsg()不能正确处理xyz之外其他field的数据长度

使用PCL的PCL的fromROSMsg()函数将ROS的sensor_msgs::PointCloud2类型数据转换为PCL的pcl::PointCloud<T>类型数据时&#xff0c;假如T只是PointXYZ没问题&#xff0c;假如是PointXYZI&#xff0c;intensity这个field的数据类型是float&#xff0c;但是数据长度就是不对的…
阅读更多...
LeetCode 第34天 | 860. 柠檬水找零 406. 根据身高重建队列 452. 用最少数量的箭引爆气球

LeetCode 第34天 | 860. 柠檬水找零 406. 根据身高重建队列 452. 用最少数量的箭引爆气球

860. 柠檬水找零 模拟找零钱的过程。 class Solution { public:bool lemonadeChange(vector<int>& bills) {int _5yuan 0;int _10yuan 0;int _20yuan 0;for (int i 0; i<bills.size(); i) {if (bills[i] 5) {_5yuan 1;}else if (bills[i] 10) {_10yuan 1…
阅读更多...
【机器学习笔记】12 聚类

【机器学习笔记】12 聚类

无监督学习概述 监督学习 在一个典型的监督学习中&#xff0c;训练集有标签&#x1d466; &#xff0c;我们的目标是找到能够区分正样本和负样本的决策边界&#xff0c;需要据此拟合一个假设函数。无监督学习 与此不同的是&#xff0c;在无监督学习中&#xff0c;我们的数据没…
阅读更多...
微服务学习Day4

微服务学习Day4

文章目录 初始MQ同步通讯和异步通讯MQ常见技术介绍 RabbitMQ快速入门入门案例 SpringAMQP介绍例子WorkQueue模型exchange交换机消息转换器 初始MQ 同步通讯和异步通讯 MQ常见技术介绍 RabbitMQ快速入门 入门案例 SpringAMQP 介绍 例子 WorkQueue模型 exchange交换机 消息转换…
阅读更多...
【JavaEE】_HTTP请求报头header

【JavaEE】_HTTP请求报头header

目录 1. Host 2. Content-Length与Content-Type 2.1 Content-Length 2.2 Content-Type 3. User-Agent&#xff08;UA&#xff09; 4. Referer 5. Cookie header的整体格式是“键值对”结构&#xff0c;一行是一个键值对&#xff0c;这些键值对都是HTTP定义好的、有特殊含…
阅读更多...
输入捕获模式测频率PWM输入模式（PWMI）测占空比

输入捕获模式测频率PWM输入模式（PWMI）测占空比

一、概念介绍 输出比较&#xff1a; 比较电路输入的CNT、CCR大小关系 &#xff0c;在通道引脚输出高低电平 二、*频率知识、测量方法补充 * N/fc得到标准频率的时长&#xff0c;也就是待测频率的周期 测频法代码实现&#xff1a;修改对射式红外传感器计次&#xff08;上升沿…
阅读更多...
怎样让MCU/SFU视频会议ovmedia 接入GB28281监控视频参会互动

怎样让MCU/SFU视频会议ovmedia 接入GB28281监控视频参会互动

在国内视频应用对GB监控接入是常规操作&#xff0c;很多系统需要接入监控视频交互处理。我们以ovmedia视频会议为例做一个接入互动。 GB28181协议在流媒体系统较为普及&#xff0c;我们以开源SRS系统对接监控端再接入会议&#xff08;也可以用商用GB流平台&#xff0c;操作基本…
阅读更多...
Open CASCADE学习|分割

Open CASCADE学习|分割

目录 1、添加头文件与源文件 GEOMAlgo_Splitter.h GEOMAlgo_Splitter.cpp 2、测试 2.1平面分割立方体 2.2以边分面 2.3以面分面 1、添加头文件与源文件 GEOMAlgo_Splitter.h // Copyright (C) 2007-2019 CEA/DEN, EDF R&D, OPEN CASCADE//// Copyright (C) 2003-2…
阅读更多...
【大厂AI课学习笔记】【2.1 人工智能项目开发规划与目标】（4）数据准备的流程

【大厂AI课学习笔记】【2.1 人工智能项目开发规划与目标】（4）数据准备的流程

今天学习的是数据准备的流程。 我们已经知道&#xff0c;数据准备占了AI项目超过一半甚至79%的时间。 那么数据准备&#xff0c;都做些什么&#xff0c;有哪些流程。 1.数据采集 观测数据人工收集调查问卷线上数据库 2.数据清洗 有缺失的数据有重复的数据有内容错误的数据…
阅读更多...
51单片机编程应用（C语言）：DS1302实时时钟

51单片机编程应用（C语言）：DS1302实时时钟

单片机计时的缺陷&#xff1a; 1.他的精度不高&#xff0c;没有时钟芯片精度高&#xff0c; 2.会占用单片机CPU的时间&#xff0c; 3.单片机的时钟无法掉电继续运行&#xff0c;&#xff08;最大的缺点&#xff09; DS1302芯片内部有备用电池&#xff0c;可以掉电继续计时…
阅读更多...
fusion360 操作总结（不断更新）

fusion360 操作总结（不断更新）

平移缩放旋转快捷键 画布选择Windows 组合键macOS 组合键平移按住鼠标中键按住鼠标中键缩放滚动鼠标中键滚动鼠标中键动态观察旋转按住 Shift 键并按住鼠标中键按住 Shift 键并按住鼠标中键绕点动态观察按住 Shift 键单击并按住鼠标中键按住 Shift 键单击并按住鼠标中键撤消Ct…
阅读更多...
MCU看门狗

MCU看门狗

目录 一、独立看门狗(IWDG) 1、IWDG 主要作用 2、IWDG 主要特性 3、编程控制 4、注意地方 二、窗口看门狗(WWDG) 1、窗口看门狗作用&#xff1a; 2、窗口看门狗产生复位信号有两个条件&#xff1a; 3、WWDG 框图 4、WWDG 将要复位的时间 5、编程控制 一、独立看门…
阅读更多...
STL:优先级队列的实现

STL:优先级队列的实现

STL中优先级队列本质上就是堆。在上一篇博客中讲到过&#xff1a;堆是一种完全二叉树&#xff0c;逻辑结构上看起来像树&#xff0c;但在物理结构中是存储在线性表中。与普通线性表不同的是&#xff0c;堆中数据大小是规律排列的&#xff1a;小堆中每个节点都大于它的父节点&am…
阅读更多...
SpringBoot实战：打造企业资产管理系统

SpringBoot实战：打造企业资产管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…
阅读更多...
最新文章

Copyright @ 2022~2023