vue-codemorror sql模式 并且支持输入 进行关键词提示，在element-dialog/drawer等弹出框中清空处理

<codemirror
          ref="sqlCode"
          v-model="sqlContent"
          :options="cmOptions"
        />
npm install  @vue-codemirror
"vue-codemirror": "^4.0.0",

//在组件的使用
// require component
import { codemirror } from 'vue-codemirror'
// require styles
import 'codemirror/lib/codemirror.css'

import 'codemirror/theme/xq-dark.css' // 主题色

import 'codemirror/addon/selection/active-line'

// 引入代码自动提示插件
require('codemirror/lib/codemirror')
require('codemirror/mode/sql/sql'); // sql模式
require('codemirror/addon/hint/show-hint'); // 代码提示插件
require('codemirror/addon/hint/sql-hint')
import 'codemirror/addon/hint/show-hint.css'; // 代码提示插件颜色


配置(vue中的data)
   sqlContent: "",
    cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'text/x-sql', // 设置语言模式为sql
        theme: 'xq-dark', // 设置主题颜色
        lineNumbers: true,
        smartIndent: true,
        line: true,
        autofocus: false,
        extraKeys: {
          'Ctrl': 'autocomplete' // 启用自动补全
        },
        hintOptions: { // 自定义提示选项
          completeSingle: false // 允许多个提示

        },

        styleActiveLine: true // 设置光标所在行高亮
        // more codemirror options, 更多 codemirror 的高级配置...

      },
  mounted() {
    // sql代码提示
    const cm = this.$refs.sqlCode.cminstance
    console.log(cm, 'cm')
    cm.on('change', () => {
      cm.showHint();// 进行自动提示 比如在输入每个词的时候 进行手动触发代码提示
      // 发现在页面中到上面一步直接就完成了。
      //但是在弹出框等有遮罩层的页面中使用codemirror的show-lint代码提示功能，层级好像不够，需要设置其层级为最高，否则在弹出框中 看不到代码提示框
      this.$nextTick(() => {
        const hintsUl = document.getElementsByClassName('CodeMirror-hints')[0]
        console.log(hintsUl, 'hintsUl')
        if (hintsUl) {
          hintsUl.classList.add('dialog-hint-sql-tip')
        }
      })
    })
  },
//最后设置css样式
<style lang="scss">
.dialog-hint-sql-tip {
  z-index: 9999 !important;
}
</style>