关于sql:安装vuecodemirror支持SQL可视化

有任何问题都能够留言征询。

npm装置

npm install vue-codemirror@4.0.6 --save// oryarn 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>