vue中粘贴板clipboard的使用方法

2023-11-01

安装clipboard : npm install clipboard --save
在模板文件中引入: import Clipboard from “clipboard”
具体使用: (这里我用的表格)

 <el-table :data="gridData" border>
        <el-table-column
          prop="documentPath"
          property="date"
          label="文件位置"
          width="600"
        ></el-table-column>
        <el-table-column property="name" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="success"
                size="mini"
                class="copy-qb"
                @click="copyQbUrl(scope.row.documentPath)"
                >复制链接</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
// 首先请求后台接口,拿到数据赋值给gridData
	
	// 调用的方法 
	copyQbUrl(url) {
      let clipboard = new Clipboard('.copy-qb', {
        text: () => {
          return url
        }
      })
      clipboard.on('success', () => {
        this.$message.success('复制成功!')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('该浏览器不支持自动复制,请手动复制!')
        clipboard.destroy()
      })
    }
	


在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue中粘贴板clipboard的使用方法 的相关文章

  • 主干视图 DOM 元素已删除

    我一直在阅读有关 Backbone js 僵尸 或内存泄漏 问题的信息 基本上 当您不再需要该元素时 您必须从 DOM 中解除绑定并删除该元素 以确保所有事件也被删除 现在 我有一个包含几个容器的单页应用程序 div div div div
  • 检查 JavaScript 字符串是否为 URL

    JavaScript 有没有办法检查字符串是否是 URL 正则表达式被排除在外 因为 URL 很可能是这样写的stackoverflow 也就是说它可能没有 com www or http 如果你想检查一个字符串是否是有效的 HTTP UR
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • 标签获取 href 值

    我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
  • 使用 KnockoutJs 映射插件进行递归模板化

    我正在尝试使用以下方法在树上进行递归模板化ko映射 插入 http knockoutjs com documentation plugins mapping html 但我无法渲染它 除非我定义separate每个级别的模板 在以下情况下
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 跟踪用户何时点击浏览器上的后退按钮

    是否可以检测用户何时单击浏览器的后退按钮 我有一个 Ajax 应用程序 如果我可以检测到用户何时单击后退按钮 我可以显示适当的数据 任何使用 PHP JavaScript 的解决方案都是优选的 任何语言的解决方案都可以 只需要我可以翻译成
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • 如何在类似控制台的环境中运行 JavaScript?

    我正在尝试遵循这里的示例 http eloquentjavascript net chapter2 html http eloquentjavascript net chapter2 html and print blah 在浏览器中运行时
  • 有没有办法阻止 prettier / prettier-now 将函数参数分解为新行

    当使用 prettier prettier now 在保存时进行格式化时 当一个函数包装另一个函数时 它会中断到一个新行 我想知道是否有办法阻止这种行为 例如 期望的输出 app get campgrounds id catchAsync
  • Safari 支持 JavaScript window.onerror 吗?

    我有一个附加到 window onerror 的函数 window onerror function errorMsg url line window alert asdf 这在 firefox chrome 和 IE 中工作正常 但在 s
  • 简单的 Vue.js 计算属性说明

    我对 Vue js 并不陌生 但我会再次浏览文档 试图找出我第一次错过的任何内容 我在以下地方看到了这个声明使用计算属性的基本示例部分 https v2 vuejs org v2 guide computed html Basic Exam
  • JQuery 图像上传不适用于未来的活动

    我希望我的用户可以通过帖子上传图像 因此 每个回复表单都有一个上传表单 用户可以通过单击上传按钮上传图像 然后单击提交来提交帖子 现在我的上传表单可以上传第一个回复的图像 但第二个回复的上传不起作用 我的提交过程 Ajax 在 php 提交
  • 如何将vue组件插入到contenteditable div中

    我想用 vue 创建简单的所见即所得编辑器 我发现只有一个在 vue js 上创建的真正的所见即所得编辑器 这里是 https quasar dev vue components editor 但我没有发现有插入图像的能力 其他 vue w
  • 如何在 pg-promise 中设置模式

    我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时 但我无法找到设置连接中使用的默认架构的选项 它始终使用public架构 我该如何设置 通常 为数据库或角色设置默认架构
  • 使用 Ajax 请求作为源数据的 Jquery 自动完成搜索

    我想做的事 我想使用 jquery 自动完成函数创建一个输入文本字段 该函数从跨域curl 请求获取源数据 结果应该与此示例完全相同 CSS 在这里并不重要 http abload de img jquerydblf5 png http a

随机推荐

  • Flink报错处理-1

    在 flink job 运行一段时间后 观察日志发现出现了如下的 warn日志 The operator name exceeded the characters length limit and was truncated 完整的 war
  • 一个可拖拽顺序,可添加可删除的React标签组件

    关于react ts中react draggable tags onChange事件不会触发 拿不到拖拽后的数组 官方回复是 示例上确实触发了 但是在实际的react ts项目中并没有触发这个onChange事件 于是我就自己写了一个 im
  • 基于MATLAB的FastICA算法实现语音信号盲分离

    基于MATLAB的FastICA算法实现语音信号盲分离 FastICA Fast Independent Component Analysis 是一种常用的盲源信号分离算法 可以应用于语音信号处理等领域 本文将介绍如何使用MATLAB实现F
  • 用白盒的思想黑盒地测试

    好久没写自动化测试的文章了 忘了自己的主业 实在是罪过罪过 今天就来点热闹的 抛个砖 分享一个我对某个案例的看法 题目虽然看起来比较晦涩 而且有堆砌关键词的嫌疑 但是我相信还是比较贴切的 相信现在业界都还是认为白盒测试是比较高级的一种测试
  • 晶振

    晶振是石英晶体谐振器 quartz crystal oscillator 的简称 也称有源晶振 它能够产生中央处理器 CPU 执行指令所必须的时钟频率信号 CPU一切指令的执行都是建立在这个基础上的 时钟信号频率越高 通常CPU的运行速度也
  • 动手学深度学习——5. 数据清洗

    动手学深度学习 5 数据清洗 记录一下学习深度学习的一些 本篇简述如何使用 cleanlab 清洗分类数据 所使用环境 Ubuntu 16 04 8700K GeForce RTX 1080Ti Python 3 8 Pytorch 1 7
  • 【Docker】 docker 命名空间(namespaces)

    神秘代码 5Lmd5biI5YWE5ZSv5LiA5Y6f5Yib5paH56ug77yM56aB5q2i6L2s6L29 1 概述 Docker 的出现一定是因为目前的后端在开发和运维阶段确实需要一种虚拟化技术解决开发环境和生产环境环境一
  • php在apache中的三种工作方式:CGI模式、FastCGI模式、Apache 模块DLL

    原文地址 http hi baidu com thisuc item 818a77725234f011d1dcb314 一 CGI模式与模块模式比较 php在apache中两种工作方式的区别 CGI模式 Apache 模块DLL 这两种工作
  • LSM6DSR驱动

    ST陀螺仪LSM6DSR的驱动 由于最近MPU的价格疯涨 不得已只能更换主控上的陀螺仪芯片 刚好VL53L1X这颗激光芯片的厂家ST有几颗陀螺仪可以用 就拿了几颗试一下 感觉效果还不错 好像可以用于手机做单击双击的判断 于是突发奇想是不是也
  • 【华为OD机试真题 Java】加扰字符串(100%通过+全网最详细注释)

    前言 本专栏将持续更新华为OD机试题目 并进行详细的分析与解答 包含完整的代码实现 希望可以帮助到正在努力的你 关于OD机试流程 面经 面试指导等 如有任何疑问 欢迎联系我 wechat steven moda email nansun09
  • PCA降维以及维数的确定

    概述 PCA principal components analysis 即主成分分析技术 又称为主分量分析 旨在利用降维的思想 把多个指标转换为少数的几个综合指标 主成分分析是一种简化数据集的技术 它是一个线性变换 这个线性变化把数据变换
  • Dialog DA14585+Sensirion SHT3X+SGP30环境温湿度检测设计

    好记性不如烂笔头 既然不够聪明 就乖乖的做笔记 温故而知新 Phosphor IOT Module是以DA14585作为主控的用于环境监测的评估板 DA14585是符合Bluetooth 5 0标准 16M 32位ARM Cortex M0
  • 学习Redis(持续更新...)

    文章目录 前言 一 redis入门 二 10大数据类型 1 字符串String 2 列表list 3 哈希表Hash 4 集合set 5 有序集合zset sorted set 6 位图bitmap 7 基数统计HyperLogLog 8
  • springboot 2.0多模块标准父类pom文件,别再问问什么找不到主类了,照着个写就行

    标准如下
  • ECharts动态加载数据绘制折线图

    Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤 连接数据接口 动态加载图表 动态加载数据 整体代码 折线图绘制 总结 绘制多个图表的方法 ECharts 纯Javascript的图表库 支持各种图表的绘制 下
  • 区块链(肖臻笔记)

    区块链的技术与应用 比特币 密码学基础 比特币的数据结构 共识协议和系统实现 挖矿算法和难度调整 比特币的脚本 软分叉和硬分叉 匿名和隐私保护 以太坊 概述 基于账户的分布式账本 数据结构 状态树 交易树 收据树 ghost协议 挖矿 me
  • 初识EMC元器件(四)——共模电感选型及应用

    通过上一篇文章 共模电感的参数解读 已经对共模电感的参数有了初步的认识 那么本章将结合电路应用 一 共模电感选型步骤 共模电感滤波应用选型步骤 确定电路性质 电气参数 滤波频段 电感参数 主要需要考虑的参数有 电感感量 额定电流 额定电压
  • 前端基础2——CSS样式

    文章目录 一 使用方式 1 1 内联方式 1 2 内部方式 1 3 外部导入方式 推荐 二 选择器类型 2 1 元素选择器 2 2 ID选择器 2 3 类选择器 2 4 派生选择器 三 常用属性 3 1 内边距和外边距 3 2 文本 3 3
  • 转置卷积/逆卷积

    转置卷积作用 上采样 原理 卷积过程 step1 滑动窗口非常低效 我选择等效矩阵 相应位置相乘再相加 得到输出feature map step2 展平 得到矩阵i step3 把每一个等效矩阵展平为列向量 得到矩阵c step4 矩阵i和
  • vue中粘贴板clipboard的使用方法

    安装clipboard npm install clipboard save 在模板文件中引入 import Clipboard from clipboard 具体使用 这里我用的表格