vue/js实现点击按钮复制的功能(使用clipboard不再使用过时的execCommand)
Navigator.clipboard
剪贴板 Clipboard API 为 Navigator
接口添加了只读属性 clipboard
,该属性返回一个可以读写剪切板内容的 Clipboard
对象。 在 Web 应用中,剪切板 API 可用于实现剪切、复制、粘贴的功能。
Clipboard
相比以前更加简洁,采用promise实现
navigator.clipboard.writeText(value); // value就是复制的内容,其后也可以追加.then()
navigator.clipboard.readText().then( clipText => document.querySelector(".cliptext").innerText = clipText ); // 如果剪切板为空,则clipText也会为空。
详细文档链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/clipboard
如果使用vue-element-admin,则可以使用他已经封装了的方法。可以看另一篇随笔(vue-element-admin 的复制方法)
需要注意的是可能有错误:TypeError: navigator.clipboard is undefined
这个问题由于新版浏览器的安全策略,clipboard只有在安全域名下才可以访问,http域名下会显示undefined,但使用https开头的域名,或localhost,就可以访问navigator.clipboard。
这种情况可以考虑使用document.execCommand。
————————————以下为过时内容——————————————————————
大致思路就是先选中此元素,然后用document中的execCommand()命令中的copy来完成复制
对于vue来说,我们一般更容易直接获取到这个数据,所以先根据数据创建添加一个新的dom元素,再选中复制,函数最后删除这个dom元素
以下是一个copy函数,参数data为想要复制的数据
1 copy(data) { 2 const copydata = data 3 const copyInput = document.createElement('input') // 新建一个元素 4 copyInput.value = copydata 5 document.body.appendChild(copyInput) 6 copyInput.select() // 选择对象; 7 console.log(copyInput.value) 8 document.execCommand('Copy') // 执行浏览器复制命令 9 this.$message({ 10 message: '复制成功', 11 type: 'success' 12 }) // 用element-ui进行一个提示 13 copyInput.remove() // 移除元素 14 }
如果是纯js,也是一样的思路,只不过更适合直接获取对应的dom元素
1 function copy() { 2 var val = document.getElementById('copyContent'); 3 window.getSelection().selectAllChildren(val); 4 document.execCommand("Copy"); 5 alert("复制成功"); 6 } 7 var clickCopy = document.getElementById("handleCopy"); 8 clickCopy.onclick = function() { 9 copy() 10 }
其中
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令。处理Html数据时常用(但是这个方法已经过时了)
详细文档链接:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步