效果图:
看这个网址:
网址: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: '