需求 sql提示器和格式化，用vue-codemirror，sql-formatter，vue-highlightjs

前言

sql-formatter选择低版本,高版本会出错

sql-formatter格式化  vue-codemirror文本框  vue-highlightjs高亮

1.引入库

在vue2项目中引入一下依赖，需要注意vue-codemirror不能选取特别新版本，最新版本需要vue3支持

npm install --save sql-formatter@2.3.3
npm install --save vue-codemirror@4.0.1
npm install --save vue-highlightjs  

2.子组件

创建SqlEditor.vue 里的代码如下：

<template>
    <div>
        <textarea 
            ref="mycode" 
            class="codesql" 
            v-model="value" 
        >
        </textarea>
    </div>
</template>
<script>
    import "codemirror/theme/ambiance.css";
    import "codemirror/lib/codemirror.css";
    import "codemirror/addon/hint/show-hint.css";
    let CodeMirror = require("codemirror/lib/codemirror");
    require("codemirror/addon/edit/matchbrackets");
    require("codemirror/addon/selection/active-line");
    require("codemirror/mode/sql/sql");
    require("codemirror/addon/hint/show-hint");
    require("codemirror/addon/hint/sql-hint");
    export default {
        data() {
            return {
                editor: null
            }
        },
        props: {
            value: {
                type: String,
                default: ''
            },
            sqlStyle: {
                type: String,
                default: 'default'
            },
            readOnly: {
                type: [Boolean, String]
            }
        },
        watch: {
            newVal (newV, oldV) {
                if (this.editor) {
                    this.$emit('changeTextarea', this.editor.getValue())
                }
            }
        },
        computed: {
            newVal () {
                if (this.editor) {
                    return this.editor.getValue()
                } else {
                    return ''
                }
            }
        },
        
        mounted(){
            let mime = 'text/x-mariadb'
            //let theme = 'ambiance'//设置主题，不设置的会使用默认主题
            this.editor = CodeMirror.fromTextArea(this.$refs.mycode, {
                value: this.value,
                mode: mime,//选择对应代码编辑器的语言，我这边选的是数据库，根据个人情况自行设置即可
                indentWithTabs: true,
                smartIndent: true,
                lineNumbers: true,
                matchBrackets: true,
                cursorHeight: 1,
                lineWrapping: true,
                readOnly: this.readOnly,
                //theme: theme,
                // autofocus: true,
                extraKeys: {'Ctrl': 'autocomplete'},//自定义快捷键
                hintOptions: {//自定义提示选项
                // 当匹配只有一项的时候是否自动补全
                    completeSingle: false,
                    // tables: {
                    //     users: ['name', 'score', 'birthDate'],
                    //     countries: ['name', 'population', 'size']
                    // }
                }
            })
            //代码自动提示功能，记住使用cursorActivity事件不要使用change事件，这是一个坑，那样页面直接会卡死
            this.editor.on('inputRead', () => {
                this.editor.showHint()
            })
        },
        methods: {
            setVal () {
                if (this.editor) {
                    if (this.value === '') {
                        this.editor.setValue('')
                    } else {
                        this.editor.setValue(this.value)
                    }
                    
                }
            }
        }
    }
</script>
<style>
.CodeMirror {
  color: black;
  direction: ltr;
  line-height: 22px;
}
.CodeMirror-hints{
  z-index: 9999 !important;
}
</style>

3.父组件Text.vue引用

<template>
	<div>
		<SqlEditor ref="sqleditor"
		   :value="basicInfoForm.sqlMain"
		   @changeTextarea="changeTextarea($event)"
		/>
		<el-button type="primary" size="small" class="sql-btn" @click="formaterSql (basicInfoForm.sqlMain)">格式化sql</el-button>
	</div>
</template>
<script>
    import sqlFormatter from 'sql-formatter'
    import SqlEditor from './SqlEditor'
	export default {
        components: {
            SqlEditor
        },
        data() {
	        return{
	        	basicInfoForm:{
	        		sqlMain: ''
				}
			}
		},
        methods:{
        	changeTextarea (val){
        	   this.$set(this.basicInfoForm, 'sqlMain', val)
        	},
        	formaterSql (val) {
                let dom = this.$refs.sqleditor
                dom.editor.setValue(sqlFormatter.format(dom.editor.getValue()))
           },
        },
     }
</script>

---

总结