vue中sql编辑器组件及其格式化，运行代码_vue sql编辑器组件

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

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)
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14