当前位置：首页 > VUE

vue实现codemirror sql

2026-01-17 06:03:16VUE

实现 Vue 中使用 CodeMirror 编辑 SQL

安装必要的依赖包：

npm install codemirror vue-codemirror

引入 CodeMirror 核心和 SQL 模式：

import Vue from 'vue'
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/theme/dracula.css'

组件注册与模板

注册组件并在模板中使用：

Vue.component('code-mirror', codemirror)

模板部分代码：

<code-mirror
  v-model="sqlCode"
  :options="cmOptions"
  @ready="onCmReady"
  @input="onCmCodeChange"
/>

配置 CodeMirror 选项

设置 CodeMirror 的配置选项：

data() {
  return {
    sqlCode: 'SELECT * FROM users;',
    cmOptions: {
      tabSize: 2,
      mode: 'text/x-sql',
      theme: 'dracula',
      lineNumbers: true,
      line: true,
      matchBrackets: true,
      indentUnit: 2,
      extraKeys: {'Ctrl-Space': 'autocomplete'}
    }
  }
}

添加自动完成功能

安装 SQL 提示插件：

vue实现codemirror sql

npm install codemirror-addon-hint

配置 SQL 提示：

import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/sql-hint.js'

更新配置选项：

cmOptions: {
  // ...其他配置
  hintOptions: {
    completeSingle: false,
    tables: {
      users: ['id', 'name', 'email'],
      products: ['id', 'title', 'price']
    }
  }
}

处理编辑器事件

添加编辑器事件处理方法：

methods: {
  onCmReady(cm) {
    console.log('编辑器已加载', cm)
  },
  onCmCodeChange(newCode) {
    console.log('代码变更:', newCode)
    this.sqlCode = newCode
  }
}

自定义 SQL 主题

创建自定义 CSS 覆盖默认样式：

vue实现codemirror sql

.CodeMirror {
  height: auto;
  min-height: 300px;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.CodeMirror-focused {
  border-color: #409EFF;
}

添加语法校验

安装 lint 插件：

npm install codemirror-lint

配置 SQL 语法校验：

import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/sql-lint.js'

更新配置选项：

cmOptions: {
  // ...其他配置
  lint: true,
  gutters: ['CodeMirror-lint-markers']
}

响应式调整大小

添加窗口大小变化监听：

mounted() {
  window.addEventListener('resize', this.resizeEditor)
},
methods: {
  resizeEditor() {
    if (this.$refs.cmEditor) {
      this.$refs.cmEditor.codemirror.refresh()
    }
  }
}

完整组件示例

<template>
  <div class="sql-editor">
    <code-mirror
      ref="cmEditor"
      v-model="sqlCode"
      :options="cmOptions"
      @ready="onCmReady"
      @input="onCmCodeChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      sqlCode: '',
      cmOptions: {
        // ...完整配置
      }
    }
  },
  // ...方法和其他选项
}
</script>