.html实现节点的复制,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");

}

也有些坑：

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

2.图片的链接不能太长

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

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

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

代码如下：

//本人项目是thymeleaf的，所以这里的事件写法可能不同

οnclick="copywriting()">

点击复制文案

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

var clipboard;

//that：为要点击的复制文案按钮

//gId：为接口参数

//copyId: 为要把数据拼接到哪个节点的标识

//初始化复制文案数据

function initCopyData(that, gId, copyId) {

//单个商品返回数据相同，防止反复调用接口

if ($(that)[0].innerText.length == 6) {

$.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)

});

}

如图：