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. 配置zsh

    .zshrc export ZSH="/root/.oh-my-zsh" ZSH_THEME="robbyrussell" plugins=(git zsh-s ...

  2. centos7配置vsftpd

    ftp服务器192.168.1.198 1.关闭selinux.关闭防火墙 2.yum -y install vsftpd* 3.开启服务,通过浏览器访问ftp://192.168.1.198,匿名用 ...

  3. [knownledge][latex] LaTex入门

    序言 最近需要写一份文档, 时间也不是特别紧. 之前一直用markdown写文档. 始终想学一下LaTex, 毕竟是学术论文界的工具. 在提及LaTex的内容之前. 事必是一定要首先提及高德纳的. 他 ...

  4. 转:Scanner中nextLine()方法和next()方法的区别

    原文地址:https://blog.csdn.net/hello_word2/article/details/54895106 总结:next() 读取第一个 空白符之前(不包括空白符)的内容,nex ...

  5. oracle partition table 分区表详解

    Oracle partition table 分区表详解 分区表就是通过使用分区技术,将一张大表,拆分成多个表分区(独立的segment),从而提升数据访问的性能,以及日常的可维护性.分区表中,每个分 ...

  6. mimkatz 用法

    mimikatz用法 privilege::debug    进入debug模式 sekurlsa::logonPasswords 查看所有用户密码 sekurlsa::wdigest 读取当前登录用 ...

  7. Docker 架构(四)

    Docker 使用客户端-服务器 (C/S) 架构模式,使用远程 API 来管理和创建 Docker 容器. Docker 容器通过 Docker 镜像来创建. 容器与镜像的关系类似于面向对象编程中的 ...

  8. shell 变量的数值计算实践 expr

    expr(evaluate(求值)expressions(表达式))命令既可以用于整数运算,也可以用于相关字符串长度.匹配等的运算处理 expr 用做计算 必须有一个空格才会计算 [root@salt ...

  9. 前端 HTML 标签嵌套规则

    标签嵌套规则 块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其它的内联元素,例如: <div><div></div><h1> ...

  10. php魔术变量和13个PHP魔术函数

    PHP魔术变量确切地说是PHP魔术常量,不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了.比如说__LINE__放在不同的地方是显示不 ...