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中点击复制粘贴功能的更多相关文章

  1. vue中点击复制粘贴功能 clipboard 移动端

    页面是由 v-for 循环渲染出来,要给每一个结构里面的复制按钮加一个复制功能 npm install clipboard --save    安装,如果安装处问题,多安装几次,我自己也安装了好几次 ...

  2. 在CMD命令行和PowerShell中实现复制粘贴功能

    在CMD命令行和PowerShell中实现复制粘贴功能         常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...

  3. Vbox中unbuntu15.10与win10共享文件 及开启复制粘贴功能

    学习linux,一直使用的是VMware虚拟机,虽然功能很强大,但总感觉页面切换很麻烦.所以转入Vbox的使用,下面介绍下unbuntu15.10与win10共享文件. 一 共享文件夹 步骤1:启动u ...

  4. Android EditText 取消复制粘贴功能,取消横向全屏编辑功能(一)

    在做一些安全性的软件时候常常要考虑取消 EditText 上的复制粘贴功能以确保安全性.下面就记录了这个方法: 首先在API-11以下的版本很简单,只需要在Xml布局文件或者用代码把长按属性设置成fa ...

  5. 仿复制粘贴功能,长按弹出tips的实现

    方案分析: 方案一:监听长按事件弹出PopupWindow[可行,缺点布局是固定的,小语种下会出现菜单截断现象] 方案二:弹出ContextMenu[不可行,因为ContextMenu的菜单是上下排列 ...

  6. iOS开发之--复制粘贴功能

    复制粘贴功能,代码如下: 1.复制功能 UIPasteboard *pasteboard = [UIPasteboard generalPasteboard]; pasteboard.string = ...

  7. Java io流完成复制粘贴功能

    JAVA 中io字节输入输出流 完成复制粘贴功能: public static void main(String[] args) throws Exception{        // 创建输入流要读 ...

  8. js实现复制粘贴功能

    在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 另一篇是禁止复制粘贴 前端er怎样操作剪切复制以及禁止复制+破解等 初步想法: 1. ...

  9. Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能

    当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...

随机推荐

  1. 编译安装spark 1.5.x(Building Spark)

    原文连接:http://spark.apache.org/docs/1.5.0/building-spark.html · Building with build/mvn · Building a R ...

  2. CMSampleBufferRef转换

    参考链接:https://blog.csdn.net/shenyi0106/article/details/47004039 https://blog.csdn.net/jeffasd/article ...

  3. [dpdk] dpdk --lcores参数

    dpdk程序的命令行参数 --lcores可以设置lcore到CPU processer的多对多映射关系. 这样既可以提供CPU processor的伸缩扩展,同时也保证了EAL thread的运行环 ...

  4. centos 安装ss

    yum install python-setuptools && easy_install pip pip install shadowsocks vi /etc/shadowsock ...

  5. linux popen()函数使用

    默认管道只能处理标准输出,不能处理标准错误输出 所以在popen()函数中运行的命令若有标准错误输出,调用者无法捕获 解决办法: 1.将标准错误输出重定向到标准输出2>&1,这样调用者能 ...

  6. Java 生成三位随机数

    调用这个Math.Random()函数能够返回带正号的double值,该值取值区间是[0.0,1.0),注意,它是左闭右开区间.返回值是一个伪随机选择的数,在该范围内(近似)均匀分布. 如果生成三位随 ...

  7. load和initialize

    load: 当类被引用进项目的时候(类文件加载到系统中)就会执行load函数(在main函数开始执行之前),与这个类是否被用到无关,每个类的load函数只会自动调用一次.由于load函数是系统自动加载 ...

  8. 前端 HTML 常用标签 head标签相关内容 link标签

    link标签 引入CSS样式文件 href="./index.css" CSS文件的路径 <!-- 引入CSS样式文件 --> <link rel="s ...

  9. mysql命令行各个参数解释

    mysql命令行各个参数解释 http://blog.51yip.com/mysql/1056.html Usage: mysql [OPTIONS] [database]   //命令方式 -?, ...

  10. what's the 爬虫之基本原理

    what's the 爬虫? 了解爬虫之前,我们首先要知道什么是互联网 1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,总体上像一张网一样. 2.互联 ...