vue3集成sql语句编辑器

news2024/11/25 10:43:26

使用的是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
}
效果图

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

热力图科普:数据可视化的利器

hello大家好&#xff0c;俺是没事爱瞎捣鼓又分享欲爆棚的叶同学&#xff01;&#xff01;&#xff01; 日常闲扯 哎呀&#xff0c;第一天上完课&#xff0c;给俺的感觉是&#xff08;热和惊喜&#xff09;&#xff0c;热是真热&#xff0c;从出租屋走到教学楼给我整的汗流浃背…

十七、网络编程

文章目录 一、网络相关的概念二、InetAddresss类三、Socket3.1 基本介绍 四、TCP网络通信编程4.1 应用案例1(使用字节流)4.2 应用案例2(使用字节流)4.3 应用案例3(使用字符流)4.4 应用案例4&#xff08;TCPFileCopy&#xff09;4.5 netstat 指令4.6 TCP网络通讯不为人知的秘密 …

为啥一定要考HCIE安全?这4个理由你不得不看

大家都知道&#xff0c;网络安全越来越成为企业和个人关注的焦点。 随着网络攻击的日益复杂和频繁&#xff0c;对于具备高级网络安全技能的专业人才的需求也在不断增长。HCIE-Security认证&#xff0c;作为华为推出的顶级信息安全认证&#xff0c;正是满足这一需求的黄金标准。…

inflight 守恒化简

设 x 为 E bw / delay 效能&#xff0c;y 为 flow 在瓶颈处的实际分配带宽&#xff0c;r 为时延&#xff0c;inflt 守恒模型的方程组如下&#xff1a; I ( t ) ∑ i 0 n w i ( t ) I(t)\displaystyle\sum_{i0}^n w_i(t) I(t)i0∑n​wi​(t) d x d t y r − x \dfrac{dx}{dt…

论文速读|自然语言的最优控制合成:机遇与挑战

项目地址&#xff1a;Optimal Control Synthesis from Natural Language: Opportunities and Challenges 介绍了一种从自然语言自动生成最优控制器的框架&#xff0c;该框架主要包括以下几个步骤&#xff1a;首先&#xff0c;通过人类用户提供的初始文本和系统描述&#xff0c;…

苹果系统中如何安装Python和PyCharm

1、Python官网下载安装包 Python官网下载苹果版本的安装包。 2、PyCharm官网下载安装包 3、下载完毕后安装Python 我采用的是在Windows下下载安装包&#xff0c;然后移动硬盘挂接到MacOS的方式进行安装。 双击开始安装Python Python安装完毕 4、Python安装完毕后的测定 注意直…

【开源免费】基于SpringBoot+Vue.JS高校校园招聘服务系统(JAVA毕业设计)

本文项目编号 T 010 &#xff0c;文末自助获取源码 \color{red}{T010&#xff0c;文末自助获取源码} T010&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 查…

Qt QPushButton 按钮添加数字气泡

使用场景 项目中&#xff0c;在某个按钮的右上角添加数字气泡是一个很常见的功能&#xff0c;可以用新建一个组合类来实现。不过这样比较麻烦&#xff0c;如果加气泡是后面的需求&#xff0c;可能改动的地方较多。 下面介绍2种比较简单&#xff0c;不需要改动按钮响应的方式。…

Web3社交新经济,与 SOEX 实现无缝交易的高级安全性

出于充分的理由&#xff0c;安全性是交易中至关重要的考虑因素。每个人都应该确保自己的资金在交易时是安全的。由于 &#xff33;&#xff2f;&#xff25;&#xff38; 充当您与交易所的最佳连接&#xff0c;因此必须强调的是&#xff0c;该系统不会引发任何安全问题。 &a…

央视曝光“硫超标”枸杞,记者直击加工现场:被熏到泪流不止

枸杞&#xff0c;这一自古以来便被誉为“药食同源”的珍贵食材&#xff0c;不仅承载着中华民族深厚的养生智慧&#xff0c;也广泛融入现代人的日常饮食与保健之中。 从食品、饮料到保健品&#xff0c;枸杞的身影无处不在&#xff0c;其独特的营养价值与药用价值深受消费者青睐。…

心电调试笔记

原理图设计 注意事项 引脚连接检查&#xff1a;确保每个元器件与芯片引脚连接正确是基础&#xff0c;错误的连接可能导致系统无法正常工作。未连接引脚标识&#xff1a;对于未使用的引脚&#xff0c;虽然不连接但应标识为非使用状态&#xff0c;以免混淆或引起误操作。测试点设…

【 html+css 绚丽Loading 】 000034 三元聚散盘

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享htmlcss 绚丽Loading&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f495…

解锁MySQL数据库基础命令:从入门到精通的实战指南

作者简介&#xff1a;我是团团儿&#xff0c;是一名专注于云计算领域的专业创作者&#xff0c;感谢大家的关注 座右铭&#xff1a; 云端筑梦&#xff0c;数据为翼&#xff0c;探索无限可能&#xff0c;引领云计算新纪元 个人主页&#xff1a;团儿.-CSDN博客 前言&#xff1a;…

PLUTO: 推动基于模仿学习的自动驾驶规划的极限

PLUTO: Pushing the Limit of Imitation Learning-based Planning for Autonomous Driving PLUTO: 推动基于模仿学习的自动驾驶规划的极限 https://arxiv.org/abs/2404.14327 Abstract We present PLUTO, a powerful framework that Pushes the Limit of imitation learn…

【扇贝编程】python爬虫——爬取动态网页笔记

在示例网站上登陆后点开第一条请求&#xff08;wp-login.php&#xff09;。右边的 Headers 里可以看到请求地址&#xff08;Request URL&#xff09;为 https://wpblog.x0y1.com/wp-login.php&#xff0c;请求方式&#xff08;Request Method&#xff09;是 POST&#xff0c;状…

戴尔科技领涨市场,AI服务器需求成关键驱动力

戴尔科技强劲上涨&#xff0c;AI服务器需求激增 戴尔科技公司日内股价飙升4.2%&#xff0c;达到115.42美元&#xff0c;接近一个月高点。这一强劲表现主要得益于该公司上调了年度盈利预期&#xff0c;原因是对Nvidia驱动的人工智能优化服务器的需求显著增加。戴尔将2025财年的年…

RTC(实时时钟)/BKP(备份寄存器

1 unix时间戳 2 时间戳转换函数 3 BKP&#xff08;备份寄存器&#xff09; 1 TAMPER引脚侵入事件 2 RTC校准时间 3 RST闹钟脉冲和秒脉冲 可以输出出来为其他信号提供 4 校准时钟&#xff0c;寄存器加输出RTC校准时钟 5 总结&#xff1a;3个功能只能同时使用一个 4 BKP基本…

windows屏幕录制:探索四款顶级录屏工具!

在数字化时代&#xff0c;我们经常需要记录屏幕上的操作&#xff0c;无论是为了教学、演示还是娱乐。Windows操作系统提供了多种录屏工具&#xff0c;这些工具各有特色&#xff0c;能够满足不同用户的需求。本文将为您介绍几款备受好评的录屏软件&#xff01; 福昕录屏大师 直…

【RabbitMQ】核心概念

界⾯上的导航栏共分6部分, 这6部分分别是什么意思呢, 我们先看看RabbitMQ的工作流程 1. Producer和Consumer Producer:生产者,是RabbitMQ Server的客户端,向RabbitMQ发送消息 Consumer: 消费者,也是RabbitMQ Server的客户端,从RabbitMQ接收消息 Broker:其实就是RabbitMQSer…

ABAP Dialog Radio Button

额.妈了个巴子&#xff0c;整了一天&#xff0c;才发现&#xff0c;原来Dialog 的Radio Button 是要右键去设置组的 我就说为什么不行咧 误区&#xff1a;我以为是属性那里的组去设置的