本文主要是介绍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代码渲染,实现滚动到指定行(三 滚动指定行)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!