vue2+codemirror代码渲染，实现滚动到指定行（三 滚动指定行）

本文主要是介绍vue2+codemirror代码渲染，实现滚动到指定行（三 滚动指定行），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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'/

这篇关于vue2+codemirror代码渲染，实现滚动到指定行（三 滚动指定行）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---