原理:浏览器本身提供了一个copy命令,利用它可以复制选中的内容:如果是输入框,我们可以利用select()方法来选中输入框中的内容,然后调用copy命令,将文本复制到剪切板,但是select()方法只对<input>和<textarea>有效,对于其他标签就不太好使了
copyText(id) {
const copyDOM = document.getElementById(id) // 获取将要复制的dom
if (!copyDOM) {
this.$message.warning('没有内容')
return
}
// 创建text area元素
const textArea = document.createElement('textarea')
textArea.value = copyDOM.innerText // 赋值
// 使text area不在viewport,同时设置不可见
textArea.style.position = 'absolute'
textArea.style.opacity = '0'
textArea.style.left = '-999999px'
textArea.style.top = '-999999px'
document.body.appendChild(textArea) //在body添加节点
textArea.focus()
textArea.select() // 选中文本
const successful = document.execCommand('copy') // 执行 copy 操作
if (successful) {
this.$message.success('复制成功!')
} else {
this.$message.warning('复制失败,请手动复制!')
}
textArea.remove()
}
在纯html当中通过getElementById api获取dom元素是没有问题的,但在vue中这样获取dom元素会导致复制失效,使用this.$refs也一样会失效