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 ...
随机推荐
- java工程师学习计划
- 最详细最全的redis配置文件解释
转载自:http://www.cnblogs.com/zhang-ke/p/5981108.html #redis.conf# Redis configuration file example.# . ...
- Html吸顶效果
Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...
- iOS调用第三方导航和线路规划
线路规划: https://blog.csdn.net/qq_19979539/article/details/51938995 百度地图:baidumap: 高德地图:iosamap: 腾讯地图:q ...
- Srt字幕文件解析
// // ViewController.m // 字幕解析 // // Created by admin on 2018/8/30. // Copyright © 2018年 admin. All ...
- [development][http][libhtp] suricata的http库--libhtp
首先,从文档来看, 它支持管道化的http, 也可以说过于重量级. 其次, 还没有达到产品化的稳定性. 并不是完全对应我的需求, http模块是一个整体性能相关模块. 应该按需定制更合理. 但是,功能 ...
- [archlinux][plasma][screensaver] plasma5配置屏保程序,没成功(-_-#)
plamsa用了好久,一直没有屏保.我想要玄酷的屏保! 用xscreensaver, 之前用FVWM2的时候,就用过了,很玄酷. 一,安装 pacman -S xscreensaver 二,配置 xs ...
- DateTimePicker用法
将DateTimePicker的Format属性中加入日期格式设成 'yyyy-MM-dd HH:mm',注意大小写 , 将kind设置为dtkTime即可,可以在每次Form onShow时将Dat ...
- DBCHART
dbchart1.Series[0].DataSource := adoquery1; dbchart1.Series[0].XLabelsSource := 'aaaa'; dbchart1.Ser ...
- RHEL6.2 ORACLE11G
今天翻文件看到这个系统的安装截图才发现自己没写,补上. 惯例还是用到的所有参数均位于文末附录 启动虚拟机进入系统安装 选择跳过硬盘检测 选择语言 选择基本存储设备 设定主机名 设定口令 选择使用所有空 ...