codemirror

<template>
  <div class="codemirror-div">
    <textarea v-model="sqlVal" label="SQL脚本语句" style="width: 200px" :id="domId" cols="30" rows="10"></textarea>
  </div>
</template>
<script lang="ts" setup name="CustomCodemirror">
import 'codemirror/theme/base16-dark.css'
// import 'codemirror/theme/idea.css'
import CodeMirror from 'codemirror/lib/codemirror.js'
import 'codemirror/lib/codemirror.css'
// import 'codemirror/addon/hint/show-hint.css'
// import 'codemirror/addon/edit/matchbrackets'
// import 'codemirror/addon/selection/active-line'
// import 'codemirror/addon/hint/show-hint'
// import 'codemirror/addon/hint/sql-hint'
// import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/javascript/javascript.js'

import { nextTick, ref } from 'vue'
import { onMounted } from 'vue'

const props = defineProps({
  readOnly: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: 'javascript'
  },
  domId: {
    type: String,
    default: 'myCodeId'
  }
})

const emit = defineEmits(['changeTextarea'])

const sqlVal = ref('')
const editor = ref<any>(null)
const timeout = ref<any>(null)

const initEditor = () => {
  editor.value = CodeMirror.fromTextArea(document.getElementById(props.domId), {
    mode: props.mode,
    indentWithTabs: false, //在缩进时，是否需要把 n*tab宽度个空格替换成n个tab字符，默认为false
    smartIndent: true, //自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
    lineNumbers: true, //是否在编辑器左侧显示行号。
    matchBrackets: true, // 匹配括号
    cursorHeight: 1, //光标高度。默认为1，也就是撑满行高。对一些字体，设置0.85看起来会更好。
    lineWrapping: true, // 自动换行
    readOnly: props.readOnly, //是否只读
    theme: 'base16-dark', // 主题配置
    autofocus: true,
    // extraKeys: { Ctrl: 'autocomplete' }, //自定义快捷键
    // hintOptions: {
    //   //自定义提示选项
    //   // 当匹配只有一项的时候是否自动补全
    //   // completeSingle: false,
    //   tables: {
    //     users: ['name', 'score', 'birthDate'],
    //     countries: ['name', 'population', 'size']
    //   }
    // }
  })
  // editor.value.on('keyup', (cm: any, event: any) => {
  //   if (!props.readOnly) {
  //     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
  //       })
  //     }
  //     //加了200毫秒的防抖
  //     if (timeout.value) {
  //       clearTimeout(timeout.value)
  //       timeout.value = null
  //     }
  //     timeout.value = setTimeout(() => {
  //       emit('changeTextarea', editor.value.getValue())
  //     }, 200)
  //   }
  // })
}
// 清除值
const clearVal = () => {
  editor.value.setValue('')
}

const setVal = (val: string) => {
  nextTick(() => {
    sqlVal.value = val
    editor.value.setValue(val)
  })
}

const getVal = () => {
  return editor.value.getValue()
}

onMounted(() => {
  nextTick(() => {
    initEditor()
  })
})

defineExpose({ clearVal, setVal, getVal })

</script>

<style lang="scss">
.codemirror-div {
  height: 500px;
  overflow: hidden;

  .CodeMirror {
    height: 100%;
  }
}
</style>