vue+codemirror 实现SQL编译器并使用及sql-formatter格式化sql语句
需求:实现一个SQL编辑区,通过左侧选择自动生成SQL语句。这里写目录标题codemirror代码编辑器使用已经封装好的组件,可自行配置参数直接复制使用。(使用的idea主题)二级目录SQL代码格式化功能SQL代码格式化遇到的bugcodemirror代码编辑器使用已经封装好的组件,可自行配置参数直接复制使用。(使用的idea主题)//封装好的组件<template><div c
·
需求:实现一个SQL编辑区,通过左侧选择自动生成SQL语句。
codemirror代码编辑器使用
- 安装
npm install --save vue-codemirror
- 代码:已经封装好的组件,可自行配置参数直接复制使用。(使用的idea主题)
//封装好的组件
<template>
<div class="json-editor">
<textarea ref="textarea" />
</div>
</template>
<script>
import CodeMirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/sql/sql.js'
// 替换主题这里需修改名称
import 'codemirror/theme/idea.css'
export default {
props: {
value: {
type: String,
required: true
},
height: {
type: String,
required: true
}
},
data() {
return {
editor: false
}
},
watch: {
value(value) {
const editorValue = this.editor.getValue()
if (value !== editorValue) {
this.editor.setValue(this.value)
}
},
height(value) {
this.editor.setSize('auto', this.height)
}
},
mounted() {
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
mode: 'text/x-mysql', //语言
lineNumbers: true, //是否在编辑器左侧显示行号
lint: true,
matchBrackets: true, // 括号匹配
lineWrapping: true,
tabSize: 2, // 缩进格式
styleActiveLine: true, // 高亮选中行
cursorHeight: 0.9,
// 替换主题这里需修改名称
theme: 'idea',
//是否为只读,如果为"nocursor" 不仅仅为只读 连光标都无法在区域聚焦
readOnly: false,
})
this.editor.setSize('auto', this.height)
this.editor.setValue(this.value)
},
methods: {
getValue() {
return this.editor.getValue()
}
}
}
</script>
<style scoped>
.json-editor {
height: 100%;
}
.json-editor>>>.CodeMirror {
font-size: 14px;
/* overflow-y:auto; */
font-weight: normal
}
.json-editor>>>.CodeMirror-scroll {}
.json-editor>>>.cm-s-rubyblue span.cm-string {
color: #F08047;
}
</style>
//父组件调用
//绑定value值即可
<code-mirror ref="codemirror" :value="content" :height="'400px'"></code-mirror>
SQL代码格式化功能
- npm安装sql-formatter插件(如果已安装淘宝镜像使用cnpm)
npm install --save sql-formatter
- 引入该sql-formatter.js文件
import sqlFormatter from 'sql-formatter';
- 使用方法
formatSql() {
/*(sql编辑器内容绑定content参数) 将sql内容进行格式后放入编辑器中*/
this.content = sqlFormatter.format(this.content);
},
- 格式化后效果
SQL代码格式化遇到的bug
- 使用过程中遇到问题:
cannot read property ‘format‘ of undefined
解决:版本问题,默认安装4.x.x版本,将版本改低即可。
更多推荐
已为社区贡献13条内容
所有评论(0)