一、效果图

二、代码段

Mycode.vue 组件代码

<template>
  <div class="codemirror-div">
		<textarea v-model="value" label="SQL脚本语句" style="width:200px" id="mycode" cols="30" rows="10"></textarea>
	</div>
</template>
<script>
import "codemirror/theme/ambiance.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";
let CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/mode/sql/sql");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
export default {
  name: 'mycode',
  mounted(){
    this.initEditor()
  },
  setup(props,context) {
    let value = ""
    
    function initEditor(){
    let editor = null;

      editor = CodeMirror.fromTextArea(document.getElementById('mycode'), {
				mode: 'text/x-sql',//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
				indentWithTabs: false, //在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
				smartIndent: true,//自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
				lineNumbers: true,//是否在编辑器左侧显示行号。
				matchBrackets: true,// 匹配括号
				cursorHeight: 1, //光标高度。默认为1，也就是撑满行高。对一些字体，设置0.85看起来会更好。
				lineWrapping: true,// 自动换行
				// readOnly: this.readOnly, //是否只读
				//theme: theme,// 主题配置
				// autofocus: true,//是否在初始化时自动获取焦点。默认情况是关闭的。但是，在使用textarea并且没有明确指定值的时候会被自动设置为true。
				extraKeys: { 'Ctrl': 'autocomplete' },//自定义快捷键
				hintOptions: {//自定义提示选项
					// 当匹配只有一项的时候是否自动补全
					// completeSingle: false,
					tables: {
						users: ['name', 'score', 'birthDate'],
						countries: ['name', 'population', 'size']
					}
				}
			})
      let timeout
			editor.on('keyup', (cm, event) => {
				if (!cm.state.completeActive && ((event.keyCode >= 65 && event.keyCode <= 90) || event.keyCode == 52 || event.keyCode == 219 || event.keyCode == 190)) {
					CodeMirror.commands.autocomplete(cm, null, {
						completeSingle: false
					})
				}
				//加了一秒的防抖
				if (timeout) clearTimeout(timeout)
				timeout = setTimeout(() => {
					context.emit('changeTextarea', editor.getValue())
				}, 1000)
			})

    }
    return {
      value,
      initEditor
    }
  }
}
</script>

 home.vue 组件调用

<template>
  <div class="CodeMirror">
    CodeMirror的使用
    <Mycode @changeTextarea="changeTextarea" />
  </div>
</template>

<script>
import Mycode from '@/components/Mycode'
export default {
  name: 'CodeMirror',
  components:{
    Mycode
  },
  setup(){
    const changeTextarea = (val) => {
      console.log(val)
    }
    return{
      changeTextarea
    }
  }
}
</script>

插件版本

 三、在element的Dialog中使用时出现提示不显示问题

是因为图层层级的问题,修改

import "codemirror/addon/hint/show-hint.css";

这个css中.CodeMirror-hints 的z-index

四、参考文献

前端vue项目中使用sql-formatter结合codemirror实现sql编辑器中的SQL代码格式化功能、自动匹配大小写功能、高亮功能_HELLO_小仙女~的博客-CSDN博客_vue前端sql编辑器

五、git地址

 欢迎⭐

https://gitee.com/zhangjinhao/my-vue3-component