时间戳

首页 > 解决方案 > Vue Codemirror 行号

javascript - Vue Codemirror 行号

问题描述

所以我正在尝试使用https://github.com/surmon-china/vue-codemirror在我的 Vue.js 应用程序中实现 codemirror 。问题是，在我导入并使用 codemirro 组件后，一切正常，但没有显示行号（代码的行数）。这是我在演示页面中的代码：

<template>
  <div class="root">
    <nav>
      <div id="logo-container">

      </div>
    </nav>
    <div id="left-side">
      <div class="codemirror">
        <!-- codemirror -->
        <codemirror v-model="code" 
                    :options="cmOption"
                    @cursorActivity="onCmCursorActivity"
                    @ready="onCmReady"
                    @focus="onCmFocus"
                    @blur="onCmBlur">
        </codemirror>
      </div>
    </div>
  </div>
</template>

这是脚本：

data() {
      return {
        code: '',
        cmOption: {
          tabSize: 4,
          styleActiveLine: true,
          lineNumbers: true,
          styleSelectedText: true,
          line: true,
          foldGutter: true,
          gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
          highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
          mode: 'text/javascript',
          // hint.js options
          hintOptions:{
            // 当匹配只有一项的时候是否自动补全
            completeSingle: true
          },
          //快捷键 可提供三种模式 sublime、emacs、vim
          keyMap: "sublime",
          matchBrackets: true,
          showCursorWhenSelecting: true,
          theme: "monokai",
          extraKeys: { "Ctrl": "autocomplete" }
        }
      }
    }

标签： javascriptvue.jscodemirror

解决方案

在您的 codemirror 配置选项中有字符串：

   lineNumbers: false,

这会关闭行号。将其值更改为 true，它应该可以解决问题。

推荐阅读