vue3封装codemirror

封装 CodeMirror 可以让我们在 Vue 中更方便地使用它，以下是一个简单的封装示例：

1. 安装 CodeMirror

npm install codemirror

2. 创建 Codemirror.vue 组件

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

<script>
import CodeMirror from 'codemirror'

export default {
  name: 'Codemirror',
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    this.cm = CodeMirror.fromTextArea(this.$refs.textarea, this.options)
    this.cm.on('change', this.handleChange)
    this.cm.setValue(this.value)
  },
  beforeUnmount() {
    this.cm.off('change', this.handleChange)
    this.cm.toTextArea()
  },
  methods: {
    handleChange() {
      this.$emit('input', this.cm.getValue())
    }
  }
}
</script>

3. 在需要使用的组件中引入 Codemirror 组件

<template>
  <div>
    <Codemirror v-model="code" :options="options" />
  </div>
</template>

<script>
import Codemirror from './Codemirror.vue'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/material.css'
import 'codemirror/mode/javascript/javascript'

export default {
  name: 'App',
  components: {
    Codemirror
  },
  data() {
    return {
      code: `function sayHello() {\n  console.log('Hello, world!')\n}`,
      options: {
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true
      }
    }
  }
}
</script>

以上示例中，我们封装了一个名为 Codemirror 的组件，它接受两个 props：value 和 options。value 表示 CodeMirror 的值，options 表示 CodeMirror 的选项。在组件中，我们使用了 CodeMirror.fromTextArea() 方法创建 CodeMirror 实例，并将其挂载到组件的 textarea 上。当值发生变化时，我们使用 v-model 语法糖和 $emit() 方法将值传递给父组件。