vue实现复制文本
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
方法一
原理浏览器本身提供了一个copy命令利用它可以复制选中的内容如果是输入框我们可以利用select()方法来选中输入框中的内容然后调用copy命令将文本复制到剪切板但是select()方法只对<input>和<textarea>有效对于其他标签就不太好使了。
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可以实现复制图片但我没能实现有大佬看到的话可以指教指教下面是代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<div>
<span id="copyMy">kjahdskjfha</span>
<button onClick="copyFn()">点击复制</button>
</div>
<script>
function copyFn(){
var val = document.getElementById('copyMy');
window.getSelection().selectAllChildren(val);
document.execCommand ("Copy");
}
</script>
</body>
</html>