vue实现sql编辑及复制到剪切板功能完整版代码

最新推荐文章于 2024-09-03 14:44:47 发布
最新推荐文章于 2024-09-03 14:44:47 发布
阅读量583 收藏 16
点赞数 19
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangshouhua365/article/details/139493739
版权
该博客展示了如何在Vue.js应用中实现SQL编辑和复制到剪贴板的功能。通过使用CodeMirror库，实现了代码编辑器，并提供了运行、清除和复制代码的图标按钮。复制功能利用了navigator.clipboard接口（如果安全上下文允许）或通过创建隐藏的textarea来实现。
摘要由CSDN通过智能技术生成

<template>

  <div class="body-container">

    <el-row>

      <img class="code-icon" src="/images/assets/run-code.png" alt="运行" @click="runcode">

      <img class="code-icon" src="/images/assets/clear-code.png" alt="清除" @click="clearcode">

      <img class="code-icon" src="/images/assets/copy-code.png" alt="复制" @click="copycode">

    </el-row>

    <div slot="content" style="margin-top: -20px;">

      <div class="form-mirror">

        <textarea

          id="code-sql-mirror"

          name="code-sql-mirror"

          style="opacity: 0;">

        </textarea>

      </div>

    </div>

    <div class="footer-btn">

      <el-button class="previous-step-btn" @click="previousStep"><i class="el-icon-back"></i>上一步</el-button>

      <el-button class="cancel-btn" @click="cancel">取 消</el-button>

      <el-button class="create-btn" type="primary" @click="submitFileForm">新 建</el-button>

    </div>

  </div>

</template>

<sc

最低0.47元/天 解锁文章
zhangshouhua365
关注
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6988
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
【学习笔记】前端（I）—— Vue2（Ⅰ）
Eddie_hyh的博客
04-30 847
前端第一部分：Vue（Ⅰ）
mlsqlwebbasedonvue提供一个sql编辑器
08-12
mlsql-web based on vue 提供一个sql编辑器
vue实现codemirror代码编辑器中的SQL代码格式化功能
12-10
vue实现codemirror代码编辑器中的SQL代码格式化功能 1、首先使用npm安装sql-formatter插件 npm install --save sql-formatter 2、然后引入该sql-formatter.js文件 import sqlFormatter from "sql-formatter"; 3、接下来就是针对需要格式化的代码调用该方法就OK啦 /*代码格式化*/ format(){ /*获取文本编辑器内容*/ let sqlContent=""; sqlContent=this.editor.getValue(); /*
vue3集成sql语句编辑器
最新发布
一个前端小白的博客
09-03 651
使用的是codemirror。
vue导入sql编辑器
波塞冬的博客
10-26 2835
sql编辑器一些配置项 （更多配置项参考：https://blog.csdn.net/JLU_Lei/article/details/80259697） 事件监听 触发器使用方法：editor.on(‘chang’, ()=>{}) 取消触发器方法：ediotr.off(‘change’) “changes”：每次编辑器内容更改时触发 “beforeChange”：事件在更改生效前触发 “cursorActivity”：当光标或选中(内容)发生变化，或者编辑器的内容发生了更改的时候触发。 “key
Vue3，使用monaco-editor实现sql对比编辑器，自定义高亮
weixin_47239456的博客
04-07 2734
vue3，实现 monaco.editor对比
前端Vue、后端SSM、前后端分离项目服务器部署实战
Robot Kevin的世界
07-30 5876
->欢迎访问我搭建的博客 开端 最近我人生中的第一个项目写完了，这是一个历经 6 个多月，9000 多行代码的前后端分离项目。之前尝试过将项目部署到服务器上，踩了不少坑，出了不少 bug， 问了不少人，最后都没有部署成功。很多个晚上，我辗转反侧，思考为什么不能成功部署，一大早起来饭也不吃就又开始了部署。 失败过，绝望过，就在今天中午，它突然成了！激动的心，颤抖的手，指向把这一伟大的事儿给记录下来，方便下次部署项目，也算是给其他人一个方案。我相信项目部署这块并不是谁都能一次成功的，特别是像我这样 Lin
ueditor去掉上传功能_UEditor上传功能
weixin_39611389的博客
12-24 669
1．复制整个ueditor文件夹到项目任意目录中。2．添加Web窗体，并按以下方式引用配置和源文件，并实例化。3．添加相应版本的Newtonsoft.Json引用。测试http://localhost:62832/Ueditor/net/controller.ashx?action=config，是否能读出json数据如果报错，则添加对的引用4．进入ueditor/net/config.json ...
vue-sqleditor-poc:基于CodeMirrorSQL编辑器的Vue组件，具有自定义自动完成功能
04-28
Vue代码镜像 基于SQL编辑器，具有 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint
vuejs-sql-editor
03-18
vuejs-sql-editor 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
vue中sql编辑器组件及其格式化，运行代码
weixin_46544034的博客
04-20 3507
vue中使用codemirror，生成sql编辑器组件及其格式化，运行代码
monaco-editor+vue2+ts实现sql编辑器
大兵的猫
02-22 2197
monaco-editor实现sql编辑器
基于 Vue + Codemirror 实现 SQL 在线编辑器
热门推荐
柯晓楠
03-06 1万+
一、项目介绍 本项目是基于 Vue2 + Codemirror 开发的 Web 版 SQL 编辑器，提供了以下功能： 在线运行 SQL 语句 实时命令提示（支持表名、字段名、SQL关键词提示） 查看 SQL 执行结果 提交 SQL 命令集 快捷使用命令集 SQL 语句格式化 SQL code differ 动态设置编辑器配置项 实时查看表结构 前端项目地址：https://gitee.com/web1024cn/vue-sqleditor 本项目提供了配套的后端示例代码（基于 Node + Expres
基于vue实现的SQL编辑器
“勤能补拙”
03-16 5187
最近根据需求需要写一个sql编辑器功能，正好看到这篇文章： 转载https://blog.csdn.net/weixin_45851208/article/details/105118847
vue2 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
m0_37378152的博客
10-11 5550
vue2 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
封装monaco-editor （sql）编辑器（Vue简略）
伐木小屋
06-14 1529
Monaco Editor 是一款开源的在线代码编辑器，它是 VSCode 的浏览器版本。
实现复制到剪贴板功能vue
09-07
要实现在Vue中的复制到剪贴板功能，你可以使用第三方库vue-clipboard2。以下是如何使用它的步骤： 1. 首先，使用 npm 或 yarn 安装 vue-clipboard2： ```bash npm install vue-clipboard2 ``` 2. 在你的 Vue 组件中，引入 vue-clipboard2： ```javascript import VueClipboard from 'vue-clipboard2' ``` 3. 在你的 Vue 组件中，注册 vue-clipboard2： ```javascript export default { // ... methods: { // ... }, mounted() { this.$clipboardConfig.autoSetContainer = true; this.$clipboardConfig.appendSuccess = true; this.$clipboardConfig.appendToBody = true; Vue.use(VueClipboard, this.$clipboardConfig); } } ``` 4. 在你的Vue模板中，使用 `v-clipboard` 指令来绑定点击事件并实现复制功能： ```html <template> <div> <button v-clipboard:copy="textToCopy">复制</button> <input v-model="textToCopy" type="text" /> </div> </template> ``` 在上面的例子中，点击"复制"按钮将会复制 `textToCopy` 的值到剪贴板。 这样就完成了在Vue中实现复制到剪贴板的功能。请注意，这仅仅是使用vue-clipboard2库的一种方式，你也可以使用其他的库来实现相同的功能。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值