clipboard + element-ui +vue 实现复制粘贴功能与提示
结合 clipboard.js 实现复制、粘贴功能
剪切功能参考官方文档,个人认为用不太上(有富文本编辑器的时候可能才用得上,也或许不需要自己实现)
想要知道怎么使用,优先参考官方文档(如何指定要复制的数据,如何复制指定的数据...)
- 这篇博客主要是介绍如何实现复制功能并搭配上友好的交互提示(见下方的 demo 图)
一般也就两种操作情况
- 1.复制指定元素的内容
- data-clipboard-action="copy"(复制)
- data-clipboard-target="#bar"(复制 id 为 bar 的元素的内容)
- 2.点击按钮直接复制设定的内容
- data-clipboard-text="diyContent"(复制到剪切板的内容为 diyContent)
demo 效果
申明
clipboard.js 官方文档:clipboard.js
- 中文官网(好像更新没那么及时了):木瓜影视|云播影视|麻花影院|集优影视
本博客 demo 采用的是 vue + element-ui + clipboard.js 实现
- 官网上的提示效果用的是 GitHub's Primer (具体什么个操作还不太懂,没去了解过)
- 页面上的复制成功提示效果调用的是 element-ui 的
Notification 通知
组件
环境配置
安装 clipboard.js:npm install clipboard --save
安装 element-ui...
步骤分析
// 0.复制选项 html 准备(参考官方文档了解配置项)<p>原样复制指定文本框内容</p><div class="row"><textarea id="bar">Mussum ipsum cacilds...</textarea><el-buttonclass="copyBtn"data-clipboard-action="copy"data-clipboard-target="#bar"icon="el-icon-copy-document">Copy</el-button></div><p>点击复制自定义内容到剪切板</p><div class="row"><el-buttonclass="copyBtn"data-test="test...":data-clipboard-text="diyContent"icon="el-icon-copy-document">Copy</el-button></div>// 1.需要用到的地方引入 Clipboard
import Clipboard from 'clipboard'// 2.用触发操作对象实例化一个 clipboard 对象
var clipboard = new Clipboard(".copyBtn");// 3.为其指定操作成功回调函数
var that = this
clipboard.on("success", function (e) {console.info("Action:", e.action);console.info("Text:", e.text);console.info("Trigger:", e.trigger);// 清除选中状态e.clearSelection();that.$notify({title: '成功',message: '恭喜您复制成功,赶快去粘贴吧~',type: 'success',showClose: false});
});// 4.为其指定操作失败回调函数
clipboard.on("error", function (e) {console.error("Action:", e.action);console.error("Trigger:", e.trigger);that.$notify.error({title: '失败',message: '操作失败,请重试!',showClose: false});
});
demo 代码实现
结构不是很好,但重在实现
src\App.vue
<template><div id="app"><HelloWorld /><tableDataCopyDemo /></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'
import tableDataCopyDemo from './components/tableDataCopyDemo.vue'export default {name: 'App',components: {HelloWorld,tableDataCopyDemo}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>
src\components\HelloWorld.vue
<template><div class="hello"><p>原样复制指定文本框内容</p><div class="row"><textarea id="bar">Mussum ipsum cacilds...</textarea><el-buttonclass="copyBtn"data-clipboard-action="copy"data-clipboard-target="#bar"icon="el-icon-copy-document">Copy</el-button></div><p>点击复制自定义内容到剪切板</p><div class="row"><el-buttonclass="copyBtn"data-test="test...":data-clipboard-text="diyContent"icon="el-icon-copy-document">Copy</el-button></div></div>
</template><script>
import Clipboard from "clipboard";
export default {name: "HelloWorld",data() {return {clipboard: null,diyContent: '这是我自定义的拷贝内容!'};},mounted() {/*// 写法 1var that = thisvar clipboard = new Clipboard(".btn");clipboard.on("success", function (e) {console.info("Action:", e.action);console.info("Text:", e.text);console.info("Trigger:", e.trigger);// 清除选中状态e.clearSelection();that.$notify({title: '成功',message: '恭喜您复制成功,赶快去粘贴吧~',type: 'success',showClose: false});});clipboard.on("error", function (e) {console.error("Action:", e.action);console.error("Trigger:", e.trigger);that.$notify.error({title: '失败',message: '不支持复制哦!',showClose: false});});*/this.clipboard = new Clipboard(".copyBtn");this.clipboard.on("success", this.successFunc)this.clipboard.on("error", this.errorFunc)},methods: {successFunc (e) {console.info("Action:", e.action);console.info("Text:", e.text);console.info("Trigger:", e.trigger);// 可以取到目标元素上的自定义属性(可以据此再做一些处理)e.trigger.dataset.test && console.log(e.trigger.dataset.test)// 清除选中状态e.clearSelection();this.$notify({title: '成功',message: '恭喜您复制成功,赶快去粘贴吧~',type: 'success',showClose: false});},errorFunc (e) {console.error("Action:", e.action);console.error("Trigger:", e.trigger);this.$notify.error({title: '失败',message: '操作失败,请重试!',showClose: false});}},beforeDestroy() {// 释放内存this.clipboardclipboard.off("error");this.clipboardclipboard.off("success");this.clipboardclipboard.destroy();}
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{display: flex;align-items: center;justify-content: flex-start;flex-direction: column;
}
#bar{margin-right: 15px;
}
.row{display: flex;justify-content: center;
}
</style>
src\components\tableDataCopyDemo.vue
<template><div style="margin-right: auto;margin-left: auto;width: 800px"><p>复制表格数据,自定义组合</p><el-table :data="list"><el-table-column label="云盘链接" prop="url"></el-table-column><el-table-column label="提取码" prop="code"></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button @click="copyLink(scope.row)" class="tag">复制</el-button></template></el-table-column></el-table></div>
</template><script>
import Clipboard from 'clipboard'
export default {name: 'ClipboardTest',data () {return {list: [{'url': 'https://www.baidu.com/1', 'code': '1234'},{'url': 'https://www.baidu.com/2', 'code': '7777'},{'url': 'https://www.baidu.com/3', 'code': '9999'}]}},methods: {copyLink (data) {console.log(1)let clipboard = new Clipboard('.tag', {text: function () {return `云盘链接:${data.url} 提取码:${data.code}`}})clipboard.on('success', e => {console.info("Action:", e.action);console.info("Text:", e.text);console.info("Trigger:", e.trigger);// this.$message({message: '复制成功', showClose: true, type: 'success'})this.$notify({title: '成功',message: '恭喜您复制成功,赶快去粘贴吧~',type: 'success',showClose: false});// 释放内存clipboard.destroy()})clipboard.on('error', e => {console.error("Action:", e.action);console.error("Trigger:", e.trigger);// this.$message({message: '复制失败,', showClose: true, type: 'error'})this.$notify.error({title: '失败',message: '操作失败,请重试!',showClose: false});clipboard.destroy()})}}
}
</script><style scoped></style>
demo 地址
- clipboard + element-ui +vue 实现复制粘贴功能
(如果帮到你了,记得帮我点个 star,非常感谢~)
原生 JS API 了解
放个链接在这里,实在有需要再去了解
(监听下列事件,再结合 paste 中的案例,即可在复制时、剪切时、粘贴时给选中内容做处理)
亦可结合点击复制功能做个案例
Element: copy 事件(可以给元素绑定事件监听)
Element: cut 事件(可以给元素绑定事件监听)
Element: paste 事件(可以给元素绑定事件监听)
- 有使用案例
(contenteditable="true"
html 标签属性,可以让元素变得像输入框一样可编辑,具体骚操作再看吧)
本文参考文档:
使用Vue的插件clipboard使用复制功能
clipboard.js 中文站
clipboard + element-ui +vue 实现复制粘贴功能与提示相关推荐
- vue element 表格内的复制粘贴功能
最近项目里面 为了方便用户 增加了复制粘贴功能 来更方便的处理数据 要求如下: 点击复制 把此条的数据复制 点击粘贴 粘贴到最后一行 复制粘贴按钮做个权限 该出现的出现 不该出现的消失 <el- ...
- vue右键复制粘贴功能_这可能是最高效的复制粘贴方法
2020.10.11 更新 左键+右键功能已经全新升级为"左键辅助",支持自定义左键+右键.侧键.以及键盘任意字母组合的操作触发. ==============原文======== ...
- Vue实现复制粘贴功能
目录 一.需求说明 二.代码实现 1.安装 vue-clipboard2 依赖 2.在 main.js 文件中全局引入插件 3.案例 三.项目所用 实现选中并且复制成功后带有提示信息的效果 : 四.功 ...
- js实现粘贴板js插件clipboard.js实现一键复制粘贴功能
js实现粘贴板js插件clipboard.js实现一键复制粘贴功能 简介 下载 引入插件 使用 一个节点的复制 多个节点的复制 剪切文本框 复制输入框 简介 clipboard.js 提供了一种更好. ...
- JS一键复制粘贴功能
使用clipboard.js 实现: 它是一个不需要Flash,就能实现文本复制或者剪切到剪切板的轻量级插件: 具体实例: 可以使用cdn 或者直接下载 设置好引用路径. <!DOCTYPE h ...
- 软件测试面试题-如何测试复制粘贴功能
复制粘贴是电脑最普遍的两个操作了,在面试的过程中,有学生被问到如何测试复制粘贴功能的时候,我个人觉得你可以这样去回答 更多学习资源,公众号主页点击领取资料 查看我评论区置顶 首先,这道题目你甚至可以发 ...
- js实现复制粘贴功能
在项目中使用到复制粘贴功能,虽然网上有很多大牛封装了很多的插件,但是还是想不去使用插件,就像自己来实现这个功能. 初步想法: 1. 获取到需要复制的内容,这里我可以将需要复制的内容放在input或者t ...
- 最新js实现复制粘贴功能实例
功能:实现鼠标点击复制内容 描述:使用与手机网站.pc等端. 实现点击复制粘贴功能的代码实例: function common_copy(text){if(text.indexOf('-') !== ...
- Windows下Ubuntu子系统,开启复制粘贴功能方法
Windows下Ubuntu子系统,开启复制粘贴功能方法 问题 我在Microsoft Store下载了Ubuntu后,进入系统发现复制粘贴不上去 解决方法 右键单击我们打开的Ubuntu终端顶部,下 ...
最新文章
- matlab拟合未定义函数或变量,关于matlab的未定义函数或变量的问题
- 嵌入式 linux 程序不能运行,嵌入式Linux中在开发板上/usr/bin目录下不能运行自己交叉编译的程序...
- 物流公司借接入平台实现异地仓库信息实时掌握
- 一道有意思的导论问题
- CentOS7搭建lamp环境
- plsql存过声明游标_plsql编程学习之游标一
- 谈新手对CString的使用
- python多线程实现for循环_Python多线程实现同时执行两个while循环
- AI赋能新闻播报 搜狐新闻客户端联合搜狗打造首个明星“数字人”主播
- 容器的六大误区和八大正确场景(颠覆你的认知)
- 火山安卓文件名类操作
- 约瑟夫环(Data structure and algorithm -C language)—— #YU
- HDU 6411 带劲的and和
- 第一性原理计算2019-nCoV病毒分子3CL水解酶结构
- Android studio 试用小技巧
- C#在图片框中显示一幅图片及其信息
- 小项目实战分享 | 用Python实现股票技术分析指标
- Android获取视频缩略图
- win10 smb共享硬盘
- The XOR Largest Pair(算法竞赛进阶指南 P72,Trie)
热门文章
- BMC Control-M Client安装问题及解决方法
- Pytorch手动更新梯度报错解决方法
- 了不起的盖茨比——那些年我们没有追到的女神
- opencv实现图像二值化(直接确定或滑杆调节)
- 使用WinDbg —— .NET篇 (二)
- vscode中文插件安装失败,提示:Unable to write into the file. Please open the file to correct errors/warnings in
- CSDN在线讲堂-》玩转C指针 学习笔记
- 西安电子科技大学专业英语考试总结
- Win10右下角通知中心打不开
- 前端:用canvas绘制一个烟花动画