前端代码实现一键复制

文章目录

• 系列文章目录
• 前言
• 一、clipboard依赖包
• 二、复制二维码
• 三、复制文本内容

---

前言

使用前端代码来一键复制文本的多种方法。

---

一、clipboard依赖包

用于复制和剪切文本。

使用步骤

代码如下（示例）：npm i clipboard

function clickBtnHandle(){
        const clipboard = new Clipboard('#copy')
        clipboard.on('success',e=>{
                Message.success('成功复制到剪切板')        //Message引用的是element组件的
                clipboard.destory()
        })
        clipboard.on('err',e=>{
                Message.error('链接复制失败，该浏览器不支持复制！')
                clipboard.destory()
        })
}

二、 复制二维码

使用步骤

<img id='wxCode' :src='qrCodeUrl' alt=""> 
copyCode(){
        const testImg = document.querySelector("#wxCode");
        const selection = window.getSelection();
        //清除选中的
        if(selection.rangeCount>0) selection.removeAllRanges();
        if(!document.queryCommandSupported('copy')){
                return Message.error('浏览器暂不支持复制命令');
        }
        const range = document.createRange()
        range.selectNode(testImg);
        selection.addRange(range);
        document.execCommand("copy");
        selection.removeAllRanges();
        Message.success('二维码复制成功！')
}

三、复制文本内容

使用步骤

---

<button onClick='copyHandle'>点击复制</button>

<textarea id="copy">copy的数据</textarea>

copyHandle(e){

        const text = document.getElementById('ipt').innerText

        const input = docment.getElementById('copy')

        input.value = text

        input.select() //选中文本

        document.execCommand('copy');

}

---

总结

以上三种就是常见的自定义复制的方式。