vue3使用vue-codemirror输入sql高亮

安装vue-codemirror

npm install vue-codemirror --save

封装myCode组件

<template>
  <div class="codemirror-div">
<!--    SQL脚本语句-->
    <textarea v-model="sqlVal" 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");
import CodeMirror from "codemirror/lib/codemirror"
import "codemirror/addon/edit/matchbrackets"
import "codemirror/addon/selection/active-line"
// require("codemirror/mode/sql/sql");
import "codemirror/addon/hint/show-hint"
import "codemirror/addon/hint/sql-hint"
import 'codemirror/mode/sql/sql.js'
import {ref} from "vue";
export default {
  name: 'mycode',
  mounted(){
    this.initEditor()
  },
  setup(props,context) {
    // let value = ""
    const sqlVal = ref('')
    let editor = null;
    function initEditor(){
      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)
      })

    }
    // 清除值
    const clearVal=()=>{
      // console.log('清除',editor.getTextArea().value)
      editor.setValue('')
    }
    return {
      sqlVal,
      initEditor,
      clearVal
    }
  }
}
</script>

使用

<template>
  <div class="app-container" >
<!--    历史数据-->
    <el-row>
      <el-form :inline="true">
        <el-form-item>
<!--          <el-input v-model="sqlVal" type="textarea" style="width: 600px" clearable></el-input>-->
          <div style="border: 1px solid #b3b3b3;border-radius: 10px;width: 500px;overflow: hidden">
            <mycode ref="myCodeRef" @changeTextarea="changeTextarea" style="width: 500px;height: 200px"/>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="info" plain size="large" @click="handleClear">清空</el-button>
          <el-button type="primary" size="large" @click="handleQuery" :icon="Search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
<!--    响应内容-->
    <el-table v-if="tableData.length>0" :data="tableData" :height="tableHeight">
      <el-table-column label="序号" align="center" width="120">
        <template #default="scope">
          <span>{{scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column v-for="item in tableHeader" :prop="item" :label="item" align="center"></el-table-column>
    </el-table>
    <el-empty v-else description="暂无数据" />
  </div>
</template>
<script setup>
import {ref,onMounted,getCurrentInstance} from "vue";
import {getTaos} from "../../../api/system/history";
import { Search } from '@element-plus/icons-vue'
import Mycode from "./myCode";
const {proxy} = getCurrentInstance()
// 查询sql
const sqlVal = ref('')
// 表格数据
const tableData = ref([])
// 表头
const tableHeader = ref([])
const myCodeRef = ref()
// 表格高度
const tableHeight = ref()
const cmOptions=ref({
  mode: 'text/x-mariadb',
  indentWithTabs: true,
  smartIndent: true,
  lineNumbers: true,
  matchBrackets: true,
  styleActiveLine: true,
  cursorHeight:1, // 光标高度
  autoRefresh: true
})
onMounted(()=>{
  tableHeight.value = window.innerHeight-320
})

// 查询
const handleQuery = ()=>{
  // tableHeader.value = []
  let arr = []
  if(!sqlVal.value){
    proxy.$message({
      message: '请输入sql',
      type: 'warning',
      // duration: 2000,
      // showClose: true,
    })
    return
  }
  // console.log('gsgsg')
  getTaos(sqlVal.value).then(res=>{
    // console.log('rrr',res)
    if(res.code==200){
      tableData.value = res.data
      if(res.data){
        for(let key in res.data[0]){
          // console.log('ooo',key)
          arr.push(key)
          tableHeader.value=arr
        }
        // console.log('ooo',tableHeader.value)
      }
    }
  })
}
// 清空
const handleClear = ()=>{
  sqlVal.value = ''
  tableHeader.value=[]
  tableData.value=[]
  myCodeRef.value.clearVal()
  // console.log('lll',myCodeRef.value)
}
const changeTextarea = (val) => {
  // console.log(val)
  sqlVal.value = val
}
</script>
<style lang="less" scoped>
@import "src/assets/css/tableStyle";
</style>

效果