【Vue】使用clipboard实现复制文本到剪贴板

最新推荐文章于 2025-06-19 18:09:42 发布

Mr_EvanChen

最新推荐文章于 2025-06-19 18:09:42 发布

阅读量8.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue clipboard 复制文本到剪贴板

本文链接：https://blog.youkuaiyun.com/Mr_EvanChen/article/details/81034065

本文介绍了在Vue项目中如何利用clipboard库实现点击按钮复制文本到剪贴板的功能，详细讲解了安装、引入和使用步骤，并展示了具体的表格代码及复制效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求如下：假设有这样的列表，我们希望能够点击复制通知链接按钮，将表格中通知链接列的内容复制到剪贴板，毕竟通知链接的内容比较多，能够复制的话，该列就可以不用展示出来。

1、安装clipboard

npm install clipboard --save

查看是否安装成功，以及查看安装的版本，可以通过查看package.json文件

2、在页面的script标签中进行引入即可使用

<script>
import Clipboard from 'clipboard';
</script>

3、表格部分代码

<el-table ref="multipleTable" :data="versions" stripe style="width: 100%;"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" v-if="hasPermission('version:delete')">
    </el-table-column>
    <el-table-column prop="id" label="文件id" v-i