vue3封装codemirror

要在 Vue 3 中使用 CodeMirror，你需要先安装 `codemirror` 包和 `@codemirror/basic-setup` 包。然后，在你的 Vue 组件中封装 CodeMirror 组件。

这里是一个示例：

<template>
  <div>
    <textarea ref="textarea"></textarea>
  </div>
</template>

<script>
import { onMounted, ref } from "vue";
import { EditorState, basicSetup } from "@codemirror/basic-setup";
import { EditorView, keymap } from "@codemirror/view";
import { defaultKeymap } from "@codemirror/commands";
import { javascript } from "@codemirror/lang-javascript";

export default {
  name: "CodeMirror",
  setup() {
    const textarea = ref(null);
    let editorView;

    onMounted(() => {
      const state = EditorState.create({
        doc: "",
        extensions: [
          basicSetup,
          keymap.of([...defaultKeymap, ...javascript().keymap]),
          EditorView.editable.of((view) => {
            editorView = view;
          }),
        ],
      });

      const editor = new EditorView({
        state,
        parent: textarea.value,
      });
      editor.focus();
    });

    return {
      textarea,
      editorView,
    };
  },
};
</script>

<style>
  .CodeMirror {
    height: 100%;
  }
</style>

在这个示例中，我们在 `setup()` 中创建了一个 `textarea` 引用，并使用 `onMounted()` 钩子在组件挂载后初始化了 CodeMirror 编辑器。我们通过 `EditorState.create()` 创建了一个包含基本设置和 JavaScript 语言支持的编辑器状态。然后，我们创建了一个 `EditorView` 实例，并将其附加到 `textarea` 元素上。

最后，我们将 `textarea` 和 `editorView` 暴露给模板，以便可以在组件中使用它们。

请注意，在这个示例中，我们将 `.CodeMirror` 类的高度设置为 `100%`，以使编辑器铺满其父元素。你可以根据需要更改这个样式。