vue实现复制文本 |
您所在的位置:网站首页 › 皮克斯动画短片20集在线观看 › vue实现复制文本 |
方法一: 原理:浏览器本身提供了一个copy命令,利用它可以复制选中的内容:如果是输入框,我们可以利用select()方法来选中输入框中的内容,然后调用copy命令,将文本复制到剪切板,但是select()方法只对和有效,对于其他标签就不太好使了。 function btnCopyClick(){ // const oInp{ut = this.$refs.copyInput[0] // 无效 // const oInput = document.getElementById('copyInput') //无效 const oInput = document.createElement('input') // 这边为链接地址this.liveLink='www.baidu.com' oInput.value = text document.body.appendChild(oInput) oInput.select() console.log(oInput.value) document.execCommand('Copy') oInput.remove() }这里有必要记录一下,在纯html当中通过getElementById api获取dom元素是没有问题的,但在vue中这样获取dom元素会导致复制失效,使用this.$refs也一样会失效。 此外必须要将创建的input标签appenchild到body中才生效。 方法二: 原理:利用游览器的navigator.clipboard api 实现复制功能,这个api优势是不依赖input/textare这些标签。 navigator.clipboard .writeText(text) .then(() => { this.copyText = '复制成功' setTimeout(() => { this.copyText = '复制' }, 1000) }) .catch((error) => { console.error('复制失败:', error) })也同样有注意点:我用的edge游览器如果本地项目的地址不是localhost,由于游览器的安全策略就会报navigator.clipboard = undefined 方法三: 原理:利用window.getSelection().selectAllChildren(element),它会选中元素的所有字节点进行复制,江湖传说利用这个api可以实现复制图片,但我没能实现,有大佬看到的话可以指教指教,下面是代码: test kjahdskjfha 点击复制 function copyFn(){ var val = document.getElementById('copyMy'); window.getSelection().selectAllChildren(val); document.execCommand ("Copy"); } |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |