首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3 CodeMirror创建SQL编辑器

在Vue3项目中集成CodeMirror创建SQL编辑器的方法详解

2025-04-04 09:09:00 作者：婷婷婷婷

在这篇文章中,我们将学习如何在 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 编辑器，提升用户体验和开发效率

到此这篇关于在Vue3项目中集成CodeMirror创建SQL编辑器的方法详解的文章就介绍到这了,更多相关Vue3 CodeMirror创建SQL编辑器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！