200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > iview利用clipboard插件实现点击文字复制到剪切板

iview利用clipboard插件实现点击文字复制到剪切板

时间:2020-06-01 12:42:04

相关推荐

iview利用clipboard插件实现点击文字复制到剪切板

要实现的需求如下

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();//页面销毁时清除复制},

最后,希望以上能给大家一个解决问题的思路。第一次写博客,主要为了记录工作中遇到的难题,小白一枚,水平有限。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。