vue实现复制文本

想一个不重名的名字

已于 2023-07-05 15:07:20 修改

阅读量2.4k

点赞数 6

分类专栏： JavaScript 文章标签：前端 javascript vue.js

于 2023-07-04 17:50:51 首次发布

本文链接：https://blog.csdn.net/qq_47099087/article/details/131539715

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

方法一：

原理：浏览器本身提供了一个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>

想一个不重名的名字

关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
vue实现复制文本

原理：浏览器本身提供了一个copy命令，利用它可以复制选中的内容：如果是输入框，我们可以利用select()方法来选中输入框中的内容，然后调用copy命令，将文本复制到剪切板，但是select()方法只对和有效，对于其他标签就不太好使了。这里有必要记录一下，在纯html当中通过getElementById api获取dom元素是没有问题的，但在vue中这样获取dom元素会导致复制失效，使用this.$refs也一样会失效。
复制链接

扫一扫

专栏目录