clipboard + element |
您所在的位置：网站首页 › js实现复制粘贴 › clipboard + element |
clipboard + element
|
结合 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 中文官网（好像更新没那么及时了）：http://www.clipboardjs.cn/本博客 demo 采用的是 vue + element-ui + clipboard.js 实现 官网上的提示效果用的是 GitHub's Primer （具体什么个操作还不太懂，没去了解过） 页面上的复制成功提示效果调用的是 element-ui 的 Notification 通知 组件 环境配置安装 clipboard.js：npm install clipboard --save 安装 element-ui... 步骤分析 // 0.复制选项 html 准备（参考官方文档了解配置项）原样复制指定文本框内容 Mussum ipsum cacilds... Copy点击复制自定义内容到剪切板 Copy // 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 import HelloWorld from './components/HelloWorld.vue' import tableDataCopyDemo from './components/tableDataCopyDemo.vue' export default { name: 'App', components: { HelloWorld, tableDataCopyDemo } } #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; }src\components\HelloWorld.vue 原样复制指定文本框内容 Mussum ipsum cacilds... Copy点击复制自定义内容到剪切板 Copy import Clipboard from "clipboard"; export default { name: "HelloWorld", data() { return { clipboard: null, diyContent: '这是我自定义的拷贝内容！' }; }, mounted() { /* // 写法 1 var that = this var 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(); } }; .hello{ display: flex; align-items: center; justify-content: flex-start; flex-direction: column; } #bar{ margin-right: 15px; } .row{ display: flex; justify-content: center; }src\components\tableDataCopyDemo.vue 复制表格数据，自定义组合 复制 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() }) } } } demo 地址 clipboard + element-ui +vue 实现复制粘贴功能（如果帮到你了，记得帮我点个 star，非常感谢~） 原生 JS API 了解放个链接在这里，实在有需要再去了解 （监听下列事件，再结合 paste 中的案例，即可在复制时、剪切时、粘贴时给选中内容做处理） 亦可结合点击复制功能做个案例 Element: copy 事件（可以给元素绑定事件监听） Element: cut 事件（可以给元素绑定事件监听） Element: paste 事件（可以给元素绑定事件监听） 有使用案例（contenteditable="true" html 标签属性，可以让元素变得像输入框一样可编辑，具体骚操作再看吧） 本文参考文档： 使用Vue的插件clipboard使用复制功能 clipboard.js 中文站 |
【本文地址】
今日新闻 |
推荐新闻 |