vue中使用Clipboard实现复制功能

1.下载clipboard  npm i clipboard  -S

2.dom结构<div class="content-bottom">

<span>商品订单号</span>

<span  class="neirong">{{item.outTradeNo}}</span>

<span class="fuzhi"  @click="copywc(index)">复制</span>

</div>

3.引入clipboard 文件   import Clipboard from 'clipboard'

4点击的时候处理

copycg(index){

let url =this.wpayment1[index].outTradeNo;   //告诉clipboard应该复制对应列表的哪项

let clipboard =new Clipboard(".fuzhi1", {

text:function() {

return url;     

}

});

clipboard.on("success", e => {

Toast({

message:'复制成功',

position:'bottom',

duration:1000,

className:'panduan'

    });

// 释放内存

    clipboard.destroy();

});

clipboard.on("error", e => {

// 不支持复制

    Toast({

message:'复制失败该浏览器不支持自动复制',

position:'bottom',

duration:1000,

className:'panduan'

    });

// 释放内存

    clipboard.destroy();

});

},