clipboard.js 实现动态复制(列表根据接口返回数据复制不同的 文字+图片)

一。纯js复制

有弊端：

1.想要复制图片+文字比较麻烦

2.只能在input节点里面复制文字

function copyContact(el) {
var oInput = document.createElement('input');//'textarea'
oInput.value = "666666666666";
document.body.appendChild(oInput);
oInput.select();
document.execCommand("Copy");
}

 

二。clipboard.js复制。中文官网：http://www.clipboardjs.cn/

也有些坑：

1.要复制的节点不能设为隐藏（如：display:none等，但是opacity:0就可以）

2.图片的链接不能太长

3.点击复制前必须先 new ClipboardJS() ，否则回出现点击两次才能复制

 

本人的项目需求是：列表里的不同商品根据接口返回的数据复制不同的文案(图片+文字)

思路：鼠标悬浮到 复制文案按钮 时触发事件，先 new ClipboardJS() ，并调用后台接口返回 html 字符串拼接到 th:id="copyTxt+${item.goodRanking}" 里，然后当 点击复制文案按钮 时再复制 th:id="copyTxt+${item.goodRanking}" 的内容

代码如下：

//本人项目是thymeleaf的，所以这里的事件写法可能不同
<div th:onmouseover="initCopyData(this,[[${item.gId}]],[[${item.goodRanking}]])"
     onclick="copywriting()">
    <div class="copy-btn">点击复制文案</div>
</div>

<div th:id="copyTxt+${item.goodRanking}"></div>

//必须先new ClipboardJS(),不然点击两次才能复制
var clipboard;

//that：为要点击的复制文案按钮
//gId：为接口参数
//copyId: 为要把数据拼接到哪个节点的标识
//初始化复制文案数据
function initCopyData(that, gId, copyId) {
    //单个商品返回数据相同，防止反复调用接口
    if ($("#copyTxt" + copyId)[0].innerText.length <= 0) {

        $.getJSON("xxxxxx", {goodsId: gId}, function (res) {
            var resData = res.data;
            if (res.code == "SUCCESS") {
                $(that).next().html(resData);
                //that为点击的节点，不然无效
                clipboard = new ClipboardJS(that, {
                    target: function (e) {
                        //重新选择节点并返回要复制的值,节点不能设为隐藏(如：display: none等)，不然无效
                        return document.querySelector("#copyTxt" + copyId);
                    }
                });
            }
        });
    }
}

//点击复制文案
function copywriting() {
    clipboard.on("success", function (e) {
　　　　　//复制成功
        clipboard.destroy();
    });
    clipboard.on("error", function (e) {
　　　　 //复制失败
        console.log(e)
    });
}


如图：