vue2+codemirror代码渲染,实现滚动到指定行(三 滚动指定行)

news2024/11/29 2:45:39

vue2+codemirror代码渲染,当代码量过大时,在几千行的代码中找到所需的方法类比较困难。这时我们需要跳转到具体方法类,代码滚动到方法类所在的代码行。

这里需要先把光标指向到指定行,再滚动到该行,

亲测好用

scrollToLine(n) {
  // 将光标设置到第n行的第一个字符
  this.codemirror.setCursor({ line: n + 20, ch: 0 })
  // 滚动到该行
  this.codemirror.scrollIntoView()
},

完整代码:

<template>
  <div class="code-edit fullscreenContent">
    <i v-if="!isFullscreen" class="el-icon-full-screen fullScreenIcon" title="进入全屏" style="font-size: 15px" @click="clickFun"></i>
    <img v-if="isFullscreen" class="fullScreenIcon" title="退出全屏" src="@/assets/miniscreen.png" @click="clickFun" />
    <codemirror ref="codeMirror" :value="value" :options="cmOptions" />
  </div>
</template>

<script>
  import screenfull from 'screenfull'
  import { codemirror } from 'vue-codemirror'
  import 'codemirror/mode/clike/clike'
  // cm-setting.js
  // 组件样式
  import 'codemirror/lib/codemirror.css'
  // 主题
  import 'codemirror/theme/eclipse.css'
  // import 'codemirror/theme/monokai.css'

  /

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

量子城域网系列(二):量子密钥与通信系统中各层协议融合应用

写在前面。国家标准中对量子保密通信的定义&#xff1a;量子保密通信是利用QKD与其他密码技术结合形成的保密通信技术。 经过这段时间的讨论&#xff0c;我们基本上明白了量子保密通信的内涵、基础协议、技术原理等。我们知道了当前语境下的量子密钥分发网络核心是实现两点之间…

【ROS2笔记三】构建ROS2功能包

3.构建ROS2功能包 文章目录 3.构建ROS2功能包3.1ROS2中包的组成部分3.2创建ROS2功能包并编写节点3.2.1使用CMake创建功能包3.2.2编写cpp节点代码 3.3编译运行节点3.4使用面向对象的方式编写ROS2节点3.5使用RCLPY编写节点Reference 3.1ROS2中包的组成部分 ROS2可以使用CMake或者…

ELK日志分析系统+Filebeat

目录 一、Filebeat介绍 1、Filebeat简介 2、Filebeat的工作方式 3、filebeat工作流程 4、Filebeat的作用 5、filebeat的用途 1.为什么要用filebeat来收集日志&#xff1f;为什么不直接用logstash收集日志&#xff1f; 2.filebeat和logstash的区别 二、部署(ELFK)Fileb…

【web开发01】前端开发HTML、CSS-新浪新闻的实现

前端开发HTML、CSS-新浪新闻的实现 1 实现标题排版1.1图片连接的三种方式1.2 具体代码1.3 总结1.< h1>到< h6>是标题从大到小 2 实现标题样式2.1 css的三种引入方式2.2 颜色的三种表示2.3 css选择器2.4 超链接 3 实现正文排版3.1 视频标签 video3.2 音频标签 audio…

【网安小白成长之路】6.pkachu、sql-lbas、upload-lbas靶场搭建

&#x1f42e;博主syst1m 带你 acquire knowledge&#xff01; ✨博客首页——syst1m的博客&#x1f498; &#x1f51e; 《网安小白成长之路(我要变成大佬&#x1f60e;&#xff01;&#xff01;)》真实小白学习历程&#xff0c;手把手带你一起从入门到入狱&#x1f6ad; &…

Python操作MongoDB - 常用操作

1、连接MongoDB 可以下载使用客户端&#xff1a;MangoDB Compass # 连接数据库&#xff0c;INT_MONGO是INT环境mongo的连接串 mongo_client pymongo.MongoClient(INT_MONGO)2、访问数据库 # 访问数据库Pytest db mongo_client["Pytest"]3、创建集合&#xff08;…

文件加密软件大全,按市场份额排名

文件加密软件大全&#xff0c;按市场份额排名 文件加密是一种保护数据安全的重要手段&#xff0c;通过使用特定的算法将明文文件转化为密文&#xff0c;以防止未经授权的访问、篡改或泄露&#xff0c;市场份额排名的八款软件你需要了解一下。 1、安企神软件 专注于加密和审计…

漏洞挖掘 SSRF 一次很菜的SSRF低危小通杀

前言 一转眼貌似很长时间都没更新博客了&#xff0c;甚至连标题的大小和格式都有点忘了&#xff0c;今后应该尽量保持每周更新一次&#xff0c;主要是平常上课太忙了&#xff0c;在学校还总是不定时会刷新一些烂事&#xff0c;就耽误了很多时间。这篇文章用于记载我最近的一次…

深入理解MD5算法:原理、应用与安全

title: 深入理解MD5算法&#xff1a;原理、应用与安全 date: 2024/4/11 20:55:57 updated: 2024/4/11 20:55:57 tags: MD5算法数据安全哈希函数摘要算法安全漏洞SHA算法密码学 第一章&#xff1a;引言 导言 在当今数字化时代&#xff0c;数据安全和完整性变得至关重要。消息…

gradio简单搭建——关键词简单筛选【2024-4-11优化】

gradio简单搭建——关键词简单筛选[2024-4-11 优化] 新的思路&#xff1a;标签自动标注界面搭建优化数据处理与生成过程交互界面展示 新的思路&#xff1a;标签自动标注 针对通过关键词&#xff0c;在文本数据中体现出主体的工作类型这一任务&#xff0c;这里使用展示工具grad…

Claude使用教程

claude 3 opus面世后&#xff0c;网上盛传吊打了GPT-4。网上这几天也已经有了许多应用&#xff0c;但竟然还有很多小伙伴不知道国内怎么用gpt&#xff0c;也不知道怎么去用这个据说已经吊打了gpt-4的claude3。 今天我们想要进行的一项尝试就是—— 用claude3和gpt4&#xff0c…

猝不及防 CCF-B ICPP 2024投稿延期至4月22日提交摘要 机会来了别错过

会议之眼 快讯 第53届ICPP&#xff08;International Conference on Parallel Processing&#xff09;即国际并行处理会议将于 2024年 8月12日-15日在瑞典哥特兰岛举行&#xff01;ICPP是世界上最古老的连续举办的并行计算计算机科学会议之一。它是学术界、工业界和政府的研究…

Vue项目页面中快速使用JSON数据格式化模块插件

页面中快速使用JSON数据格式化模块插件 JSON数据格式化模块插件&#xff0c;可以用来展示JSON数据&#xff0c;也可以验证某数据是否为JSON格式 1、可以使用 b-code-editor插件 来实现效果&#xff0c;方便快捷&#xff0c; 安装命令&#xff1a;npm install bin-code-editor…

suno有了新对手udio炸裂音乐圈;又一个开源AI Devin 程序员;完全开源轻量级的文本到语音可生成特定说话者的风格

✨ 1: udio 由音乐和科技界重量级人物支持的强大 AI 音乐生成器&#xff0c;被称为音乐界的另一个 ChatGPT。 Udio 由前 Google DeepMind的研究院和工程师创立&#xff0c;得到了a16z的支持&#xff0c;总部在伦敦和纽约。 目前是一个免费的V1测试版产品&#xff0c;每个人每…

docker完美安装分布式任务调度平台XXL-JOB

分布式任务调度平台XXL-JOB 1、官方文档 自己看 https://www.xuxueli.com/xxl-job/#1.1%20%E6%A6%82%E8%BF%B0 2、使用docker部署 本人使用的腾讯云&#xff0c;安装docker暴露一下端口&#xff0c;就很舒服的安装这个服务了。 docker pull xuxueli/xxl-job-admin:2.4.03…

飞书api增加权限

1&#xff0c;进入飞书开发者后台&#xff1a;飞书开放平台 给应用增加权限 2&#xff0c;进入飞书管理后台 https://fw5slkpbyb3.feishu.cn/admin/appCenter/audit 审核最新发布的版本 如果还是不行&#xff0c;则需要修改数据权限&#xff0c;修改为全部成员可修改。 改完…

KVM+GFS分布式存储

本章内容&#xff1a; 学会KVMGFS分布式存储高可用 1.0 案例环境 1.案例环境 大规模使用 KVM 虚拟机来运行业务&#xff0c;为了保证公司虚拟机能够安全稳定运行&#xff0c; 决定采用 KVMGlusterFS 模式&#xff0c;来保证虚拟机存储的分布部署&#xff0c;以及分布冗余。避…

2024.4.11

1.思维导图 2.指针形式验证大小端存储 #include<myhead.h>int main(int argc, const char *argv[]) {int num 0x12345678;char* ptr (char *)&num;if(*ptr 0x12){printf("big endian\n");}else if(*ptr 0x78){printf("little endian\n");}r…

正则表达式与JSON序列化:去除JavaScript对象中的下划线键名

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

vue源码解析——v-if和v-for哪个优先级高,如何避免两者同时使用

首先&#xff0c;官方不推荐v-if和v-for在同一个元素上使用。其次&#xff0c;如果两者同时使用&#xff0c;v-if和v-for的优先级怎么确定&#xff1f;在vue2和vue3中这两者的优先级顺序不一样。vue2是v-for优先&#xff0c;条件不存在时也会渲染多个注释节点。在vue3中进行了改…