Vue复制内容到剪切板

Posted 2023-04-28

参考技术A Vue实现复制内容到剪切板功能

开发中常见使用场景：

<span style="color: #1677FF;margin-left: 5px;" @click="copyOrderId(item.order_id)"> 复制 </span>

实现复制方法：
copyOrderId(orderId)
var input = document.createElement("input"); // 创建input对象
input.value = orderId; // 设置复制内容
document.body.appendChild(input); // 添加临时实例
input.select(); // 选择实例内容
document.execCommand("Copy"); // 执行复制
document.body.removeChild(input); // 删除临时实例
this.$toast.success("成功复制订单号");
,

复制内容到剪切板

(function() {
        var textarea = document.createElement(‘textarea‘);
        textarea.id = ‘text‘;
        textarea.innerHTML = Math.round(Math.random() * 100);
        textarea.style.opacity = 0;
        document.body.appendChild(textarea);
        document.onclick = function() {
            var text = document.getElementById("text");
            text.select();
            document.execCommand("Copy");
        }
    })();