vue3集成sql语句编辑器

最新推荐文章于 2024-09-03 17:11:34 发布

九亿少女无法触及的梦ى

最新推荐文章于 2024-09-03 17:11:34 发布

阅读量210

点赞数 1

文章标签： sql 编辑器 vue.js

本文链接：https://blog.csdn.net/qq_39557024/article/details/141861167

版权

使用的是codemirror

安装

 pnpm add codemirror vue-codemirror --save
 pnpm add  @codemirror/lang-sql
 pnpm 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
}