codemirror封装，可以像textareay进行高度调节

一、封装code.vue

<template>
  <div class="am-code">
    <codemirror ref="codeRef" v-model:value="cmCode" :options="cmOptions" :electricChars="false" @ready="onCmReady" class="mirror" :style="cmHeight"></codemirror>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onUpdated, watch, nextTick, computed } from 'vue'
import Codemirror from 'codemirror-editor-vue3'
import 'codemirror/addon/display/autorefresh.js' // 显示自动刷新
import 'codemirror/addon/lint/json-lint.js'
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/selection/active-line.js' //高亮行功能
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/sql/sql.js' //语言模式
import 'codemirror/theme/cobalt.css' //主题
import 'codemirror/theme/rubyblue.css'

export default defineComponent({
  name: 'AmCode',
  components: { Codemirror },
  props: {
    code: {
      type: String,
      default: ''
    },
    theme: {
      type: String,
      default: 'cobalt' //cobalt黑色背景 idea白色背景 dracula透明
    },
    height: {
      type: String,
      default: '100px'
    },
  },
  // emits: ['onCmReady'],
  setup(props, { emit }) {
    const codeRef = ref()
    const cmCode = ref(props.code)
    const cmTheme = ref(props.theme)
    const cmOptions = {
      mode: 'text/x-mysql',
      theme: cmTheme.value,
      styleActiveLine: true,
      autoRefresh: true,
      lint: true,
      // gutters: ['CodeMirror-lint-markers'],
      lineNumbers: true,
      indentWithTabs: true,
      smartIndent: true,
      // 软换行
      lineWrapping: true,
      // 自动括号匹配功能
      matchBrackets: true,
      // tab宽度
      tabSize: 2
    }
    const onCmReady = (params: any) => {
      emit('onCmReady', params)
    }
    const codeRefresh = () => {
      codeRef.value.cminstance.refresh()
    }

    onMounted(() => {
      codeRefresh()
    })
    onUpdated(() => {
      emit('update:code', cmCode)
    })
    const cmHeight = computed(() => {
      return  {'--code-height': props.height}
    })
    return { cmCode, cmTheme, cmOptions, codeRef, onCmReady, codeRefresh, cmHeight}
  }
})
</script>
<style scoped lang="scss">
.am-code {
  width: 100%;
  display: contents;
  overflow: auto !important;
  .mirror {
    resize: vertical;
    overflow: auto !important;
  }
  .codemirror-container{
    height: var(--code-height);
  }
}
</style>

二、导出组件文件index.ts

import { App } from 'vue'
import Code from './src/code.vue'

// 定义 install 方法， App 作为参数
const install = (app: App): void => {
  app.component(Code.name, Code)
}

export default { install }

三、使用

<am-code v-model:code="dataForm.executeSql" height="120px"></am-code>

四、踩坑

一个项目中同时存在codeMirror与富文本编辑器时，先加载富文本编辑器后使用codeMirror时，codeMirror样式会受影响，因为富文本编辑器中也存在codemirror.css,