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
}
效果图

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/418217.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

适合程序员在周末阅读的历史书籍:理解人性和世界

一、《人类简史&#xff1a;从动物到上帝》 这本书提供了对人类历史和社会发展的深刻洞察&#xff0c;帮助读者理解人类过去、现在和可能的未来。 《人类简史&#xff1a;从动物到上帝》是以色列历史学家尤瓦尔赫拉利&#xff08;Yuval Noah Harari&#xff09;创作的一部极具影…

【物理密度计工作原理图】密度大小与密度计浸没深度关系图

密度大小与密度计浸没深度关系图 绘制图像的好处&#xff1a; 直观展示数据&#xff1a;图形可以直观地展示数据之间的关系&#xff0c;使得理解和分析数据变得更加容易。 便于比较&#xff1a;通过图形可以快速比较不同液体密度下密度计的浸没深度变化。 科学验证&#xff…

glsl着色器学习(六)

准备工作已经做完&#xff0c;下面开始渲染 gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);gl.clearColor(0.5, 0.7, 1.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);gl.enable(gl.DEPTH_TEST); gl.enable(gl.CULL_FACE);设置视口 gl.viewport(0,…

StarRocks Lakehouse 快速入门——Apache Iceberg

导读&#xff1a; StarRocks Lakehouse 快速入门旨在帮助大家快速了解湖仓相关技术&#xff0c;内容涵盖关键特性介绍、独特的优势、使用场景和如何与 StarRocks 快速构建一套解决方案。最后大家也可以通过用户真实的使用场景来了解 StarRocks Lakehouse 的最佳实践&#xff01…

判断给定的一个不限长的数字串大小变化趋势、经典面试题:猴子排成圈踢出求最后剩下大王编号以及Debian服务器php中安装IMAP扩展各种报错解决过程

一、判断给定的一个不限长的数字串大小变化趋势 自制了一道面试题&#xff1a;给定一个不限长的数字字符串&#xff0c;判断每一位数字的大小变化趋势是否是^或v趋势&#xff0c;如果是就返回true&#xff0c;如果不是就返回false。比如121即属于^&#xff0c;322129即属于v。这…

SSM健身俱乐部网站—计算机毕业设计源码25623

摘 要 大数据时代下&#xff0c;数据呈爆炸式地增长。为了迎合信息化时代的潮流和信息化安全的要求&#xff0c;利用互联网服务于其他行业&#xff0c;促进生产&#xff0c;已经是成为一种势不可挡的趋势。在健身俱乐部的要求下&#xff0c;开发一款整体式结构的健身俱乐部网站…

多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测

多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测 目录 多维时序 | Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab基于SSA-SVR麻雀算法优化支持向量机的数据多变…

​​NIFI汉化_替换logo_二次开发_Idea编译NIFI最新源码_详细过程记录_全解析_Maven编译NIFI避坑指南002

继续,执行pom.xml引入依赖以后,发现以下几种报错: 可以看到在下载aws-java-sdk-bundle 1.12.710版本的时候报错了 可以看到日志信息,就是在阿里云上下载的,因为阿里云上缺少这个jar包 aws-java-sdk-bundle-1.12.710.jar 这个jar包,我还特意去阿里云上查询了一下 https://deve…

结合Python与GUI实现比赛预测与游戏数据分析

在现代软件开发中&#xff0c;用户界面设计和数据处理紧密结合&#xff0c;以提升用户体验和功能性。本篇博客将基于Python代码和相关数据分析进行讨论&#xff0c;尤其是如何通过PyQt5等图形界面库实现交互式功能。同时&#xff0c;我们将探讨如何通过嵌入式预测模型为用户提供…

java基础-线程实现

文章目录 什么是线程线程的基本特性线程的状态线程的调度 线程的实现方式1. 继承 Thread 类2. 实现 Runnable 接口3. 使用 Callable 和 Future4. 使用 ExecutorService总结 什么是线程 线程&#xff08;Thread&#xff09;是计算机科学中的一个重要概念&#xff0c;它是操作系…

蔬菜识别数据集 蔬菜数据集 用于训练,有十种蔬菜,如图已经标注好的版本

数据集概述 该数据集包含十种常见的蔬菜&#xff1a;胡萝卜、包菜、水果辣椒、青瓜、南瓜、土豆、花菜和西红柿。数据集已经进行了精细的标注&#xff0c;适用于深度学习模型的训练&#xff0c;尤其是用于物体检测和分类任务。 数据集特点 种类多样&#xff1a;涵盖了八种蔬菜…

maven-helper插件解决jar包冲突实战

经常遇到jar包冲突问题&#xff0c;今天梳理一下&#xff1a; 1、打开idea 2、安装后 打开pom文件 点击 3、点击common-io 展示冲突的jar,标红的就是冲突版本&#xff0c;白色的是当前的解析版本。 pom文件多了排除的信息 <dependency><groupId>org.springframew…

0基础跟德姆(dom)一起学AI Python进阶07-多线程_生成器

* 多进程案例 * 带参数的多进程代码**(重点)** * 查看进程的id * 演示: 进程之间数据是相互隔离的 * 多线程案例 * 入门案例 * 带参数的多线程代码**(重点)** * 演示: 线程之间数据是相互共享的 * 互斥锁 * 上下文管理器**(重点)** > 解析: with open原理, 为啥…

Unity6 + UE5.4 PSO缓存实践记录

题图&#xff08;取自COD冷战的着色器编译提示&#xff09; PSO&#xff08;管线状态对象 Pipeline State Object&#xff09;是伴随现代图形API&#xff08;DirectX12、Vulkan、Metal&#xff09;而出现的概念&#xff0c;它本质上是单次绘制时渲染管线所处的状态信息的集合&…

机器学习中的聚类艺术:探索数据的隐秘之美

一 什么是聚类 聚类是一种经典的无监督学习方法&#xff0c;无监督学习的目标是通过对无标记训练样本的学习&#xff0c;发掘和揭示数据集本身潜在的结构与规律&#xff0c;即不依赖于训练数据集的类标记信息。聚类则是试图将数据集的样本划分为若干个互不相交的类簇&#xff…

关于武汉高芯coin417G2红外机芯的二次开发

文章目录 前言一、外观和机芯参数二、SDK的使用1、打开相机2、回调函数中获取全局温度和图像3、关闭相机 前言 最近工作中接触了一款基于武汉高芯科技有限公司开发的红外模组,即coin417g2(测温型)9.1mm镜头.使用此模组,开发了一套红外热成像检测桌面应用程序.下面简单记录下该…

PHP轻量级高性能HTTP服务框架 - webman

摘要 webman 是一款基于 workerman 开发的高性能 HTTP 服务框架。webman 用于替代传统的 php-fpm 架构&#xff0c;提供超高性能可扩展的 HTTP 服务。你可以用 webman 开发网站&#xff0c;也可以开发 HTTP 接口或者微服务。 除此之外&#xff0c;webman 还支持自定义进程&am…

UE5 C++ 读取图片插件(一)

原来UE可以使用 static,之前不知道&#xff0c;一用就报错。 static TSharedPtr<IImageWrapper> GetImageWrapperByExtention(const FString InImagePath); //智能指针&#xff0c;方便追寻引用C,加载ImageWrapperstatic UTexture2D* LoadTexture2D(const FString& …

大路灯护眼灯有必要吗安全吗?性价比高落地护眼灯推荐

大路灯护眼灯有必要吗安全吗&#xff1f;近几年来&#xff0c;随着生活节奏的加快&#xff0c;目前青少年的近视率呈现一个直线上升的趋势&#xff0c;其中占比达到了70%以上&#xff0c;并且最令人意外的是小学生竟然也占着比较大的比重&#xff0c;这一系列的数据不仅表明着近…

Kafka【五】Buffer Cache (缓冲区缓存)、Page Cache (页缓存)和零拷贝技术

【1】Buffer Cache (缓冲区缓存) 在Linux操作系统中&#xff0c;Buffer Cache&#xff08;缓冲区缓存&#xff09;是内核用来优化对块设备&#xff08;如磁盘&#xff09;读写操作的一种机制&#xff08;故而有一种说法叫做块缓存&#xff09;。尽管在较新的Linux内核版本中&a…