VUE 滚动到指定区域scrollIntoView

背景:当前 VUE 页面数据量很大,右侧出现滚动条, 进入该页面,页面定位到指定区域;

 项目要求: 进入页面,定位到指定行(红色标记)

直接看效果:

代码demo:

<template><div><p style="height: 300px">fkahfkahfha</p><p style="height: 300px">fkahfkahfha</p><p style="height: 300px">fkahfkahfha</p><p style="height: 300px">fkahfkahfha</p><p style="height: 300px">fkahfkahfha</p><p style="height: 300px">fkahfkahfha</p><p style="height: 300px">fkahfkahfha</p><p style="height: 300px">fkahfkahfha</p><p style="height: 300px">fkahfkahfha</p><div class="stackTrace error-detail" ref="stackTraceContainer"><divv-for="(line, index) in formattedAdvice":key="index"class="code-line"v-html="line"ref="codeLines"></div></div></div>
</template><script>
export default {data() {return {currentBugInfo: {advice: `c
// example1.c
// memory-leaks error
#include <stdlib.h>int main(void) {for (int i = 0; i < 99999999; i++) {char *buffer = (char *)malloc(1024 * sizeof(char));  // 分配动态内存// ...// free(buffer);  // 内存泄漏}return 0;
}
},// example2.cpp
// memory-leaks error
int main() {char *buffer = new char[1024];// ...buffer = new char[2048];  // 指针指向新的缓冲区,一开始分配的缓冲区无法访问,导致内存泄漏// ...delete[] buffer;return 0;
}// example2.cpp
// memory-leaks error
int main() {char *buffer = new char[1024];// ...buffer = new char[2048];  // 指针指向新的缓冲区,一开始分配的缓冲区无法访问,导致内存泄漏// ...delete[] buffer;return 0;
}
`,errorLine: 26, // 假设错误行号是6},};},computed: {formattedAdvice() {const lines = this.currentBugInfo.advice.split("\n");// 为特定行添加红色样式const highlightedLine = `<span style="color: red;">${lines[5]}</span>`;// 替换特定行,注意行号是从0开始的,所以是 errorLine - 1lines[this.currentBugInfo.errorLine - 1] = highlightedLine;// 使用 join 将数组重新组合为字符串,并在行之间添加换行符return lines.map((line, index) => {return index < lines.length - 1 ? line + "\n" : line;});},},mounted() {this.scrollToErrorLine();},methods: {scrollToErrorLine() {this.$nextTick(() => {// 定位到特定行的DOM元素const errorLineElement =this.$refs.stackTraceContainer.children[this.currentBugInfo.errorLine - 1];console.log("获取到什么", errorLineElement);// 将该行滚动到可见区域的中间位置--我在当前demo页面是可以定位到红色错误行的// 但是项目上,一直有为题,最后给滚动加个定时器解决了// errorLineElement.scrollIntoView({//   behavior: "smooth",//   block: "center",// });// 添加定时器setTimeout(() => {errorLineElement.scrollIntoView({behavior: "smooth",block: "center",});}, 1000);});},},
};
</script>
<style scoped>
.stackTrace {font-family: FiraCode, PingFang SC, Microsoft YaHei;overflow: auto;box-sizing: border-box;border-radius: 3px;white-space: pre-wrap; /* css3.0 */white-space: -moz-pre-wrap; /* Firefox */white-space: -pre-wrap; /* Opera 4-6 */white-space: -o-pre-wrap; /* Opera 7 */word-wrap: break-word; /* Internet Explorer 5.5+ */word-break: break-all;font-size: 14px;/* color: #fff; */line-height: 24px;overflow-y: auto;overflow-x: hidden;
}
.error-detail {max-height: 400px;overflow: auto;font-weight: 400;
}
</style>

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

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

相关文章

Unity设计模式之工厂模式

什么是工厂模式&#xff1f; 工厂是一种创建型设计模式。通俗来讲就是提供一种封装对象创建的方式&#xff0c;将对象的创建和使用区分开。就是Unity里面通常用到的创建和管理对象。 工厂模式有什么优点&#xff1f; 1、封装对象的创建方式&#xff0c;使其更加灵活、易于管理…

中美在AI大模型的商业化和产业化的优势和面临的挑战有哪些?

中美在AI大模型的商业化和产业化的优势和面临的挑战有哪些&#xff1f; 中美在AI大模型的商业化和产业化方面各有优势&#xff0c;但也面临不少挑战。 一、优势 1、技术领先 美国在AI大模型领域拥有深厚的技术储备和布局&#xff0c;如OpenAI的GPT系列、谷歌的BERT等&#…

【前段】开发五子棋小游戏全流程

使用前端技术开发五子棋小游戏 在这篇博文中,我们将详细介绍如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏。我们将展示如何初始化棋盘、处理用户交互以及实现胜负判定。特别是,我们将着重介绍胜负判定的逻辑实现。 完整代码我放在了这里:github 项目结构 项…

EE trade:现货黄金交易有哪些优势

现货黄金交易具有多种优势&#xff0c;使其成为许多投资者青睐的投资选择&#xff1a; 流动性高&#xff1a;黄金市场是全球最大的金融交易市场之一&#xff0c;确保了黄金拥有极高的流动性。这意味着投资者可以随时买入或卖出黄金&#xff0c;几乎不必担心大额交易会对市场价…

锁策略详解:互斥锁、读写锁、乐观锁与悲观锁、轻量级锁与重量级锁、自旋锁、偏向锁、可重入锁与不可重入锁、公平锁与非公平锁

目录 一.锁策略 二.互斥锁 三.读写锁 四.乐观锁与悲观锁 五.重量级锁与轻量级锁 六.自旋锁 七.偏向锁 八.公平锁与非公平锁 九.可重入锁与不可重入锁 一.锁策略 锁策略指的是在多线程编程中用于管理共享资源访问的规则和技术。它们确保在任何给定时间只有一个线程可以…

自然资源-国土空间体系下详细规划转型建设-学习安徽模式

自然资源-国土空间体系下详细规划转型建设-学习安徽模式 为了全面贯彻落实党的二十大精神&#xff0c;深化“多规合一”改革成果&#xff0c;提高城市规划、建设、治理水平&#xff0c;促进城乡高质量发展&#xff0c;2023年3月&#xff0c;自然资源部印发《关于加强国土空间详…

IntelliJ IDEA 配置JDK

IntelliJ IDEA-之配置JDK 我们的开发神器IDEA安装好了之后&#xff0c;在实际开发中&#xff0c;我们如何去配置好JDK的版本呢&#xff1f; 注意&#xff1a;需要保证JDK在已经成功安装的情况下&#xff0c;再进行IDEA的配置 现在就行动&#xff0c;让IntelliJ IDEA成为你征…

【工具】macOS、window11访问limux共享目录\共享磁盘,samba服务安装使用

一、samba服务安装 Samba是一个免费的开源软件实现&#xff0c;使得非Windows操作系统能够与Windows系统进行文件和打印服务共享。它实现了SMB/CIFS协议&#xff0c;并且能够在Linux、Unix、BSD等多种系统上运行。 安装 samba&#xff1a; sudo yum install samba配置 samba…

后端之路第一站——Maven

前提&#xff1a;得会基础java 前言&#xff1a;不知道出于什么原因&#xff0c;可能是喜欢犯贱吧&#xff0c;本人从大一到大二都一直在专研前端开发&#xff0c;一点也没接触过后端&#xff0c;但是突然抽风想学后端了&#xff0c;想试着自己全栈搞一下项目&#xff0c;于是在…

机器人工具箱学习(三)

一、动力学方程 机器人的动力学公式描述如下&#xff1a; 式中&#xff0c; τ \boldsymbol{\tau} τ表示关节驱动力矩矢量&#xff1b; q , q ˙ , q \boldsymbol{q} ,\; \dot{\boldsymbol { q }} ,\; \ddot{\boldsymbol { q }} q,q˙​,q​分别为广义的关节位置、速度和加速…

【Python】图形用户界面设计

1、设计并编写一个窗口程序,该窗口只有一个按钮,当用户单击时可在后台输出hello world. import tkinter as tk def on_button_click():print("hello world") # 创建主窗口 root tk.Tk() root.title("Hello World Button") # 设置窗口大小 root.geometry…

Android手动下载Gradle的使用方法

导入新项目通常会自动下载gradle版本&#xff0c;这种方式很慢而且经常下载失败&#xff0c;按照提示手动下载的gradle应该放在那里&#xff0c;如何使用&#xff0c;本篇文章为你提供一种亲测有效的方法&#xff1a; 在Android Studio打开Setting搜索Gradle找到Gradle的存放目…

每日一练 2024.5.16(补 2024.5.14)

题目&#xff1b; 我们定义 arr 是 山形数组 当且仅当它满足&#xff1a; arr.length > 3存在某个下标 i &#xff08;从 0 开始&#xff09; 满足 0 < i < arr.length - 1 且&#xff1a; arr[0] < arr[1] < ... < arr[i - 1] < arr[i]arr[i] > arr…

【大模型微调】一文掌握7种大模型微调的方法

本篇文章深入分析了大型模型微调的基本理念和多样化技术&#xff0c;细致介绍了LoRA、适配器调整(Adapter Tuning)、前缀调整(Prefix Tuning)等多个微调方法。详细讨论了每一种策略的基本原则、主要优点以及适宜应用场景&#xff0c;使得读者可以依据特定的应用要求和计算资源限…

Vue的学习 —— <vue组件>

目录 前言 正文 一、选项式API与组合式API 二、生命周期函数 1、onBeforeMount() 2、onMounted() 3、onBeforeUpdate() 4、onUpdated() 5、onBeforeUnmount() 6、onUnmounted() 三、组件之间的样式冲突 四、父组件向子组件传递数据 1、定义props 2、静态绑定props…

1709 ssm互联网消费信贷系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java ssm互联网消费信贷系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源 代码和数据库&#xff0c;系统主要…

淘宝评论api接口的探索与实践

一、淘宝评论api接口简介 淘宝评论api接口是淘宝开放平台提供的一种数据接口&#xff0c;通过该接口&#xff0c;开发者可以获取淘宝商品的评论信息&#xff0c;包括评论内容、评论评分、评论时间等。此接口为开发者提供了丰富的评论数据&#xff0c;便于进行商品评价分析、营…

在 Django 中获取已渲染的 HTML 文本

在Django中&#xff0c;你可以通过多种方式获取已渲染的HTML文本。这通常取决于你希望在哪个阶段获取HTML文本。下面就是我在实际操作中遇到的问题&#xff0c;并且通过我日夜奋斗终于找到解决方案。 1、问题背景 在 Django 中&#xff0c;您可能需要将已渲染的 HTML 文本存储…

图文并茂:解析Spring Boot Controller返回图片的三种方式

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 图文并茂&#xff1a;解析Spring Boot Controller返回图片的三种方式 前言使用Base64编码返回图片使用byte数组返回图片使用Resource对象返回图片图片格式转换与性能对比 前言 在互联网的世界里&…