Vue Codemirror行号

Question

因此，我正在尝试使用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" }
        }
      }
    }

Answer 1

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

   lineNumbers: false,

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