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