1、组件SqlEditor
<template>
<div>
<codemirror
ref="myCm"
:options="cmOptions"
:value="value"
@changes="onCmCodeChanges"
@keydown.native="onKeyDown"
@mousedown.native="onMouseDown"
></codemirror>
</div>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/theme/idea.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/scroll/simplescrollbars.js'
import 'codemirror/addon/selection/active-line.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'
export default {
components: {
codemirror
},
props: ['value'],
data() {
return {
editor: null,
codemirror: '',
timer: null,
cmOptions: {
theme: 'idea',
mode: 'text/x-mysql',
readOnly: false,
line: true,
tabSize: 4, // 制表符
indentUnit: 2, // 缩进位数
lineNumbers: true,
lineWiseCopyCut: true,
viewportMargin: 1000,
autofocus: true,
autocorrect: true,
spellcheck: true,
specialChars: /[\u0000-\u001f\u007f-\u009f\u00ad\u061c\u200b-\u200f\u2028\u2029\ufeff\ufff9-\ufffc]/g,
extraKeys: { 'Tab': 'autocomplete' },
lint: false,
maxHighlightLength: Infinity,
// 代码折叠
gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
lineWrapping: false,
foldGutter: true, // 启用行槽中的代码折叠
autoCloseBrackets: true, // 自动闭合符号
autoCloseTags: true,
matchTags: { bothTags: true },
matchBrackets: true, // 在光标点击紧挨{、]括号左、右侧时,自动突出显示匹配的括号 }、]
styleSelectedText: true,
styleActiveLine: true, // 当前背景行高亮
autoRefresh: true,
highlightSelectionMatches: {
minChars: 2,
trim: true,
style: 'matchhighlight',
showToken: false
},
hintOptions: {
completeSingle: false
}
}
}
},
methods: {
resetLint() {
if (!this.$refs.myCm.codemirror.getValue()) {
this.$nextTick(() => {
this.$refs.myCm.codemirror.setOption('lint', false)
})
return
}
this.$refs.myCm.codemirror.setOption('lint', false)
this.$nextTick(() => {
this.$refs.myCm.codemirror.setOption('lint', true)
})
},
// 按下键盘事件处理函数
onKeyDown(event) {
const keyCode = event.keyCode || event.which || event.charCode
const keyCombination = event.ctrlKey || event.altKey || event.metaKey
if (!keyCombination && keyCode > 64 && keyCode < 123) {
this.$refs.myCm.codemirror.showHint({ completeSingle: false })
}
},
// 按下鼠标时事件处理函数
onMouseDown(event) {
this.$refs.myCm.codemirror.closeHint()
},
//向父级组件发送事件
sendsql() {
this.timer = setTimeout(() => {
let cm = this.$refs.myCm.codemirror
this.$emit('onChangeCode', cm.getValue())
}, 500)
},
onCmCodeChanges(cm, changes) {
this.editorValue = cm.getValue()
this.resetLint()
if (!this.timer) {
this.sendsql()
} else {
clearTimeout(this.timer)
this.sendsql()
}
}
},
created() {
try {
if (!this.value) {
this.cmOptions.lint = false
return
}
} catch (e) {
console.log('初始化codemirror出错' + e)
}
}
}
</script>
<style lang="less" scoped>
.CodeMirror-hints {
z-index: 9999 !important;
}
</style>
2、父组件
<div class="sql-editor">
<SqlEditor ref="cmEditor" :value="sql" @onChangeCode="changeCode"></SqlEditor>
</div>
import SqlEditor from './components/SqlEditor.vue'
import { format } from 'sql-formatter'//用来格式化,这里没放,用法很简单,不过要注意安装的版本,不然会报错
components: //注册
//接收数据
changeCode(val) {
this.sql = val
console.log(this.sql)
},