vue3集成sql语句编辑器

使用的是codemirror

安装

 pnpm add codemirror vue-codemirror --savepnpm add  @codemirror/lang-sqlpnpm add  @codemirror/theme-one-dark

使用

<template><codemirror v-model="configSql" placeholder="Code goes here..." ref="codemirrorRef" :style="{width: '100%', height: '480px'}" :autofocus="true" :extensions="extensions" :indent-with-tab="true" @blur="handleBlur($event, item)" :tab-size="2" />
</template>
import {Codemirror} from 'vue-codemirror'
import {sql} from '@codemirror/lang-sql'
import {oneDark} from '@codemirror/theme-one-dark'
let configSql = ref()
let extensions = ref([sql(), oneDark])
let codemirrorRef = ref()
function handleBlur() {codemirrorRef.value.modelValue
}

效果图