安装vue-codemirror支持SQL可视化

来源：恒创科技编辑：恒创科技编辑部

2023-12-17 15:20:59

有任何问题都可以留言咨询。

npm安装

npm install vue-codemirror@4.0.6 --save
// or
yarn add vue-codemirror@4.0.6 -D

在main.js引入

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'

Vue.use(VueCodeMirror)

写到vue文件

<template>
  <div>
    <codemirror ref="cmRef" v-model="code" :options="cmOptions" />
  </div>
</template>

<script>
import 'codemirror/theme/xq-light.css'
import 'codemirror/mode/sql/sql.js'
// 加提示的引用
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/show-hint'
export default {
  name: 'xxx',
  data() {
    return {
      code: '',
      cmOptions: {
        tabSize: 4,
        mode: 'text/x-sql',
        theme: 'xq-light',
        styleActiveLine: true,
        lineNumbers: true,
        line: true,
        // 加提示
        hintOptions: {
         completeSingle: false
        }
      },
      currentSeletion: ''
    }
  },
  async mounted() {
    // 加提示
    this.$refs.cmRef.codemirror.on('inputRead', (cm) => {
      cm.showHint()
    })
    // 获取选中的内容
    this.$refs.cmRef.codemirror.on('cursorActivity', (cm) => {
      this.currentSeletion = cm.getSelection()
    })
  }
}
</script>

<style lang="scss" scoped>
.vue-codemirror {
  border: 1px solid #b9b9b9;
}
</style>