html实现点击复制内容功能

Vue复制功能

原创已于 2023-01-10 14:10:31 修改 · 6.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

于 2022-10-14 17:43:44 首次发布

前端三剑客专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在Vue项目中实现点击复制功能。首先需要安装clipboard插件或通过CDN引入。然后在HTML中设置data-clipboard-text属性绑定要复制的内容，并通过JS实例化Clipboard对象监听复制成功的回调。

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

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