vue中点击复制粘贴功能
1.下载clipboard.js
cnpm install clipboard --save
2.引入,可以在mian.js中全局引入也可以在单个vue中引入
import Clipboard from 'clipboard';
3.使用,在template中,这里我用了elementui框架
<el-table-column
label="taskId">
<template slot-scope="scope">
<el-tooltip placement="top">
<div slot="content">点击复制</div>
<span style="display:block;cursor:pointer;width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;" class="tag-read" :data-clipboard-text="tableData[scope.$index].taskId" @click="copy">{{tableData[scope.$index].taskId}}</span>
</el-tooltip>
</template>
</el-table-column>
4.使用,在methods中
copy() {
var clipboard = new Clipboard('.tag-read')
clipboard.on('success', e => {
success("复制成功");//这里你如果引入了elementui的提示就可以用,没有就注释即可
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
},
5.最后效果:点击后直接可以在控制台进行粘贴
--------------------------》》》》》
6.如果需要在main.js中引入
//引入剪切板插件clipboard;
import Clipboard from 'clipboard';
Vue.prototype.Clipboard=Clipboard;
vue组件中
copy() {
var clipboard = new this.Clipboard('.tag-read');
clipboard.on('success', e => {
success("复制成功");
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
},
vue中点击复制粘贴功能的更多相关文章
- vue中点击复制粘贴功能 clipboard 移动端
页面是由 v-for 循环渲染出来,要给每一个结构里面的复制按钮加一个复制功能 npm install clipboard --save 安装,如果安装处问题,多安装几次,我自己也安装了好几次 ...
- 在CMD命令行和PowerShell中实现复制粘贴功能
在CMD命令行和PowerShell中实现复制粘贴功能 常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...
- Vbox中unbuntu15.10与win10共享文件 及开启复制粘贴功能
学习linux,一直使用的是VMware虚拟机,虽然功能很强大,但总感觉页面切换很麻烦.所以转入Vbox的使用,下面介绍下unbuntu15.10与win10共享文件. 一 共享文件夹 步骤1:启动u ...
- Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)
在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...
- 仿复制粘贴功能,长按弹出tips的实现
方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...
- iOS开发之--复制粘贴功能
复制粘贴功能,代码如下: 1.复制功能 UIPasteboard *pasteboard = [UIPasteboard generalPasteboard]; pasteboard.string = ...
- Java io流完成复制粘贴功能
JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{ // 创建输入流要读 ...
- js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...
- Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能
当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...
随机推荐
- 编译安装spark 1.5.x(Building Spark)
原文连接:http://spark.apache.org/docs/1.5.0/building-spark.html · Building with build/mvn · Building a R ...
- CMSampleBufferRef转换
参考链接:https://blog.csdn.net/shenyi0106/article/details/47004039 https://blog.csdn.net/jeffasd/article ...
- [dpdk] dpdk --lcores参数
dpdk程序的命令行参数 --lcores可以设置lcore到CPU processer的多对多映射关系. 这样既可以提供CPU processor的伸缩扩展,同时也保证了EAL thread的运行环 ...
- centos 安装ss
yum install python-setuptools && easy_install pip pip install shadowsocks vi /etc/shadowsock ...
- linux popen()函数使用
默认管道只能处理标准输出,不能处理标准错误输出 所以在popen()函数中运行的命令若有标准错误输出,调用者无法捕获 解决办法: 1.将标准错误输出重定向到标准输出2>&1,这样调用者能 ...
- Java 生成三位随机数
调用这个Math.Random()函数能够返回带正号的double值,该值取值区间是[0.0,1.0),注意,它是左闭右开区间.返回值是一个伪随机选择的数,在该范围内(近似)均匀分布. 如果生成三位随 ...
- load和initialize
load: 当类被引用进项目的时候(类文件加载到系统中)就会执行load函数(在main函数开始执行之前),与这个类是否被用到无关,每个类的load函数只会自动调用一次.由于load函数是系统自动加载 ...
- 前端 HTML 常用标签 head标签相关内容 link标签
link标签 引入CSS样式文件 href="./index.css" CSS文件的路径 <!-- 引入CSS样式文件 --> <link rel="s ...
- mysql命令行各个参数解释
mysql命令行各个参数解释 http://blog.51yip.com/mysql/1056.html Usage: mysql [OPTIONS] [database] //命令方式 -?, ...
- what's the 爬虫之基本原理
what's the 爬虫? 了解爬虫之前,我们首先要知道什么是互联网 1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,总体上像一张网一样. 2.互联 ...