要实现的需求如下
mounted(){
this.getYzmlbList();
this.clipboard = new Clipboard(".copyBtn",{
text: function(trigger) {
return trigger.getAttribute('btn');
}
});
this.clipboard.on("success", e => {
this.$Message.success('已复制到剪切板!');
e.clearSelection();
});
this.clipboard.on("error", e => {
this.$Message.error("复制失败");
});
},
模仿clipboard官网的高级写法
render: (h,{row}) =>{
let num = row.msg.match(/\d{6}/ ,"");
return h("div",{
style:"text-align:left",
domProps: {
innerHTML: row.msg.replace(/\d{6}/, '<a class="copyBtn" style="font-size:15px;text-decoration:underline;font-weight: bold" data-clipboard-action="copy" btn="'+num+'">'+num+'</a>')
}
});
}
记得离开页面时清除复制,不然再回来点击复制会出问题
destroyed () {
this.clipboard.destroy();//页面销毁时清除复制
},
最后,希望以上能给大家一个解决问题的思路。第一次写博客,主要为了记录工作中遇到的难题,小白一枚,水平有限。