codemirror-editor-vue3编辑器行号错位bug

 直接当组件使用

<template>
  <div class="codemirror">
    <codemirror
      ref="codemirror"
      v-model:value="code"
      :options="cmOption"
      @cursorActivity="onCmCursorActivity"
      @ready="onCmReady"
      @focus="onCmFocus"
      @blur="onCmBlur"
    />
  </div>
</template>

<script>
import Codemirror from "codemirror-editor-vue3";

// base style
import "codemirror/lib/codemirror.css";

// theme css
import "codemirror/theme/monokai.css";

// language
import "codemirror/mode/vue/vue.js";

// active-line.js
import "codemirror/addon/selection/active-line.js";

// styleSelectedText
import "codemirror/addon/selection/mark-selection.js";
import "codemirror/addon/search/searchcursor.js";

// highlightSelectionMatches
import "codemirror/addon/scroll/annotatescrollbar.js";
import "codemirror/addon/search/matchesonscrollbar.js";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/match-highlighter.js";

// keyMap
import "codemirror/mode/clike/clike.js";
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/comment/comment.js";
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
import "codemirror/addon/search/searchcursor.js";
import "codemirror/addon/search/search.js";
import "codemirror/keymap/sublime.js";

// foldGutter
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/indent-fold.js";
import "codemirror/addon/fold/markdown-fold.js";
import "codemirror/addon/fold/xml-fold.js";

// import axios from 'axios';

export default {
  props: ["initCode", "mode"],
  name: "code-editor",
  title: "Mode: text/x-vue & Theme: monokai",
  components: {
    Codemirror,
  },

  created() {
    // self.axios = axios.create({
    //   baseURL: '',
    //   timeout: 1000,
    // });
  },

  mounted() {
    this.refreshScript();
  },

  computed: {
    code: {
      get() {
        return this.codeStore;
      },
      set(newVal) {
        this.codeStore = newVal;
      },
    },
  },
  watch: {
    initCode() {
      this.codeStore = this.initCode;
    },
  },

  data() {
    return {
      codeStore: this.initCode,
      cmOption: {
        smartIndent: true, //智能缩进
        indentUnit: 4, // 智能缩进单元长度为 4 个空格
        matchBrackets: true, //每当光标位于匹配的方括号旁边时，都会使其高亮显示
        autofocus: true,
        showCursorWhenSelecting: true,
        autoRefresh: true,

        tabSize: 4,
        foldGutter: true,
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        keyMap: "sublime",
        mode: this.mode,
        theme: "monokai",
        extraKeys: {
          F11(cm) {
            cm.setOption("fullScreen", !cm.getOption("fullScreen"));
          },
          Esc(cm) {
            if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
          },
        },
      },
    };
  },
  methods: {
    refreshScript() {
      let codemirror = this.$refs["codemirror"].cminstance;
      setTimeout(() => {
        codemirror.refresh();
      }, 100);
    },
    onCmCursorActivity(codemirror) {},
    onCmReady(codemirror) {},
    onCmFocus(codemirror) {},
    onCmBlur(codemirror) {},

    getEditorCode() {
      return this.codeStore;
    },
  },
};
</script>



<style>

.CodeMirror-scroll {

  min-height: 200px;
}
</style>