html实现点击复制内容功能

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

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();
});