使用vue-codemirror

使用场景：点击生成sql，显示带有行数的sql语句，这里我使用的是vue-codemirror

 1、vscode安装vue-codemirror

npm install vue-codemirror@4.0.6 --save// oryarn add vue-codemirror@4.0.6 -D

2、在main.js中引用

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

Vue.use(VueCodeMirror)

3、在vue组件中使用

<template>
    <div>
        <div>
           <codemirror ref="cmRef" v-model.trim="sqlText" :options="cmOptions" />
        </div>
    </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 {
    data(){
        return {
            sqlText:"",
            cmOptions: {
                tabSize: 4,
                mode: "text/x-sql",
                theme: "xq-light",
                styleActiveLine: true,
                lineNumbers: true,
                line: true,
              },
        }
    },
  mounted() {
    this.editor = this.$refs.cmRef.codemirror;
    // 设置codemirror高度为450
    this.editor.setSize("auto", 450);
  },
}
</script>
<style lang="less" scoped>
.vue-codemirror {
  width: 800px;
  text-align: left;
  border: 1px solid #b9b9b9;
}
</style>

 总结：我这里只是用来展示带有行数的sql语句

如果需要加提示，可以参考这个链接：安装vue-codemirror支持SQL可视化

需要适应屏幕高度，我找到这个链接：vue-codemirror设置高度，自定义高度，跟随屏幕高度_codemirror 设置高度_烽火照西京的博客-CSDN博客