在 Vue 3 项目中集成 CodeMirror 创建 SQL 编辑器
在这篇文章中,我们将学习如何在 Vue 3 项目中集成 CodeMirror,以创建一个支持 SQL 语法高亮和自动补全的代码编辑器。
什么是 CodeMirror?
CodeMirror 是一个功能强大的浏览器内代码编辑器,支持多种编程语言的语法高亮和代码补全。
项目设置
首先,确保您的 Vue 3 项目已创建。然后,安装 codemirror-editor-vue3
组件和必要的 CodeMirror 依赖:
npm install codemirror-editor-vue3 codemirror@^5
如果您的项目需要 TypeScript 支持,还需安装 @types/codemirror
:GitHub
npm install @types/codemirror -D
编写组件
在 Vue 3 组件中,使用 <Codemirror>
标签引入 CodeMirror 编辑器,并配置相关属性:
<template>
<Codemirror
v-model:value="code"
:options="cmOptions"
:width="width"
:height="height"
:readonly="readonly"
@ready="onReady"
@blur="onInput"
/>
</template>
<script setup>
import { ref, computed, nextTick } from "vue";
import Codemirror from "codemirror-editor-vue3";
// 引入必要的 CSS 文件
import "codemirror/lib/codemirror.css";
import "codemirror/theme/idea.css";
import "codemirror/mode/sql/sql.js";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/sql-hint";
import "codemirror/addon/display/placeholder.js";
// 定义 props
const props = defineProps({
readonly: {
type: Boolean,
default: false,
},
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "300px",
},
placeholder: {
type: String,
default: "SELECT * FROM log_table WHERE id > ${id}",
},
});
// 定义响应式变量
const code = ref("");
// 配置 CodeMirror 选项
const cmOptions = computed(() => ({
mode: "text/x-sql",
theme: "idea",
lineNumbers: true,
lineWrapping: true,
tabSize: 4,
readOnly: props.readonly ? "nocursor" : false,
placeholder: props.placeholder,
hintOptions: {
completeSingle: false,
tables: {
BPSuv: ["DocEntry", "Subject", "DocStatus", "Remarks"],
BPSuvA: ["DocEntry", "LineNum", "Question", "QstType"],
BPSuvB: ["DocEntry", "LineNum", "UserID", "UserName"],
},
},
}));
const emit = defineEmits();
// 处理输入事件
const onInput = () => {
emit("changeTextarea", code.value);
};
// 初始化编辑器
const onReady = (editor) => {
editor.on("inputRead", (cm, event) => {
if (/[a-zA-Z]/.test(event.text[0])) {
cm.showHint();
}
});
nextTick(() => {
editor.refresh();
});
};
</script>
<style>
.CodeMirror-hints {
z-index: 9999 !important;
position: absolute !important;
}
</style>
代码解析
- 引入组件和样式:导入
codemirror-editor-vue3
组件以及 CodeMirror 的核心和附加功能的 CSS 和 JS 文件。 - 定义属性(props) :设置组件的只读状态、宽度、高度和占位符。
- 响应式变量:使用
ref
创建响应式的code
变量,用于绑定编辑器的内容。 - 配置选项:通过
computed
创建cmOptions
,配置编辑器的模式、主题、行号、自动补全等功能。 - 事件处理:定义
onInput
方法,在编辑器失去焦点时触发changeTextarea
事件,传递当前代码内容。 - 初始化编辑器:在
onReady
方法中,监听inputRead
事件,当用户输入字母时,显示自动补全提示。
使用案例
假设我们有一个日志查询系统,需要用户输入 SQL 查询语句。通过上述组件,我们可以在 Vue 3 项目中轻松实现一个功能完善的 SQL 编辑器,提供语法高亮、自动补全等功能,提升用户体验。
例如,用户在编辑器中输入 SELECT * FROM
后,会自动提示可用的表名,如 BPSuv
、BPSuvA
等;继续输入表名后,输入 WHERE
,会提示该表的字段名,如 DocEntry
、Subject
等,帮助用户快速编写查询语句。
注意事项
- 主题设置:确保引入的主题与
cmOptions
中的theme
一致。 - 自动补全:
hintOptions
中的tables
配置了 SQL 补全的表和字段信息,可根据实际需求调整。 - 样式调整:通过修改
.CodeMirror-hints
的z-index
,确保自动补全提示不被其他元素遮挡。
通过上述步骤,您可以在 Vue 3 项目中成功集成 CodeMirror,实现一个功能完善的 SQL 编辑器,提升用户体验和开发效率