SqlEditor SQL 编辑器

基于 CodeMirror 6 的 SQL 代码编辑器，支持 SQL 语法高亮、一键格式化、清空、全屏编辑。内置自定义 SQL 格式化器，能正确处理引号、注释中的内容。

• 基础用法
• Props
• Events
• 工具栏按钮
• 内置 SQL 格式化器
• 注意事项

基础用法

<template>
  <SqlEditor v-model:value="sql" />
</template>

<script setup>
import { ref } from 'vue'
import SqlEditor from '@/components/SqlEditor.vue'

const sql = ref('SELECT * FROM users WHERE status = 1')
</script>

Props

属性	类型	默认值	说明
value	String	''	SQL 语句内容（支持 v-model）
placeholder	String	'SELECT * FROM table_name WHERE ...'	空内容时的占位提示
readonly	Boolean	false	是否只读模式
theme	String	'light'	编辑器主题：'light' | 'dark'
showFullscreen	Boolean	false	是否显示全屏编辑按钮

Events

事件名	参数	说明
update:value	(value: string)	内容变化时触发
format	(formattedSQL: string)	点击格式化按钮后触发，携带格式化后的 SQL
clear	—	点击清空按钮后触发

工具栏按钮

编辑器上方有操作工具栏：

• 格式化 — 对当前 SQL 进行格式化（关键字大写、统一缩进），触发 format 事件
• 清空 — 清空编辑器内容，触发 clear 事件
• 全屏（showFullscreen=true 时显示） — 进入全屏编辑模式

内置 SQL 格式化器

组件内置了自定义格式化逻辑，特点：

• 自动保护单引号、双引号、反引号内的内容不被修改
• 正确处理 SQL 注释（-- 单行、/* */ 块注释）
• 关键字转为大写，统一缩进
• 对比直接使用 sql-formatter 等库，本格式化器更精准地处理边界情况

注意事项

• 基于 CodeMirror 6，无需额外安装编辑器库
• 暗色主题 theme="dark" 需要父容器有深色背景配合
• 格式化器是自定义实现，非常规库，复杂 SQL 可能需要手动微调