vue：sql 语句格式化、高亮、

效果图：


看这个网址：
网址：https://www.cnblogs.com/xx321/p/15951006.html

注意：




完整代码：

必须创建子组件，不然效果出不来

代码在这个项目里面复制：

二、子组件：

<template>

  <div>

    <textarea ref="sqlEditor" v-model="value" class="codesql"></textarea>

  </div>

</template>

<script>

// 引入核心样式

import 'codemirror/theme/ambiance.css'

import 'codemirror/lib/codemirror.css'

import 'codemirror/addon/hint/show-hint.css'

import 'codemirror/theme/monokai.css'

// 引入全局实例

const CodeMirror = require('codemirror/lib/codemirror')

const sqlformatter = require('sql-formatter')

//

require('codemirror/addon/edit/matchbrackets')

require('codemirror/addon/selection/active-line')

// sql语言包

require('codemirror/mode/sql/sql')

// 代码自动提示插件

require('codemirror/addon/hint/show-hint')

require('codemirror/addon/hint/sql-hint')

export default {

  name: 'Govfront