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

要实现的需求如下
iview利用clipboard插件实现点击文字复制到剪切板_第1张图片

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}/, '+num+'">'+num+'')
                            }
                        });
                    }

记得离开页面时清除复制,不然再回来点击复制会出问题

destroyed () {
        this.clipboard.destroy();//页面销毁时清除复制
    },

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

你可能感兴趣的:(前端)