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)
});
}


如图:

 

GG-伏沙金
posted @ 2020-08-22 17:49  伏沙金  阅读(683)  评论(0编辑  收藏  举报