需要实现点击复制功能需要先下载个插件:

vue中可以通过 npm install clipboard --save-dev 来安装该插件;

也可以通过使用线上cdn:

 

 复制scirpt标签引入到页面即可

html:

<td class="t_left">
    用户名:这里展示数据 
  <i id='copy' class="iconfont icon-beifen color_main ml5" data-clipboard-text="这里绑定需要复制的数据"></i>
</td>

注:如果是vue中那么 data-clipboard-text 要写为 :data-clipboard-text  动态绑定数据

js:

var copyBtn = document.getElementById('copy');

var clipboard = new Clipboard(copyBtn );//实例化
clipboard.on('success', function(e) {
    // 复制成功执行的回调,可选
    console.log(e);
    // 释放内存
    clipboard.destroy();
});
clipboard.on('error', function(e) {
    // 复制失败执行的回调,可选
    console.log(e);
    // 释放内存
    clipboard.destroy();
});
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐