需要实现点击复制功能需要先下载个插件:
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();
});