当前位置：首页 > VUE

vue实现codemirror sql

2026-03-09 11:08:23VUE

安装依赖

在Vue项目中安装codemirror及其相关依赖。codemirror是核心库，vue-codemirror是Vue的封装库，codemirror-mode-sql提供SQL语法高亮支持。

npm install codemirror vue-codemirror codemirror-mode-sql

引入组件和样式

在Vue组件中引入codemirror的核心代码、SQL模式以及必要的CSS样式。样式文件包括核心样式和主题样式（如dracula）。

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

注册组件

在Vue组件中注册codemirror组件，使其可以在模板中使用。

export default {
  components: {
    codemirror
  }
}

配置编辑器选项

设置codemirror的配置选项，包括模式（mode）、主题（theme）、行号（lineNumbers）等。SQL模式设置为text/x-sql。

data() {
  return {
    code: 'SELECT * FROM users;',
    options: {
      mode: 'text/x-sql',
      theme: 'dracula',
      lineNumbers: true,
      indentUnit: 2,
      tabSize: 2
    }
  }
}

使用组件

在模板中使用codemirror组件，绑定数据code和配置options。@input事件用于实时获取编辑器内容。

<codemirror v-model="code" :options="options" @input="onCodeChange"></codemirror>

处理输入事件

在方法中定义onCodeChange函数，用于处理编辑器内容变化时的逻辑，例如打印当前内容到控制台。

methods: {
  onCodeChange(newCode) {
    console.log('SQL代码已更新:', newCode)
  }
}

完整示例代码

以下是一个完整的Vue组件示例，整合了上述所有步骤，实现了一个基础的SQL代码编辑器。

vue实现codemirror sql

<template>
  <div>
    <codemirror v-model="code" :options="options" @input="onCodeChange"></codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/dracula.css'
import 'codemirror/mode/sql/sql.js'

export default {
  components: {
    codemirror
  },
  data() {
    return {
      code: 'SELECT * FROM users;',
      options: {
        mode: 'text/x-sql',
        theme: 'dracula',
        lineNumbers: true,
        indentUnit: 2,
        tabSize: 2
      }
    }
  },
  methods: {
    onCodeChange(newCode) {
      console.log('SQL代码已更新:', newCode)
    }
  }
}
</script>