Vue复制内容到剪贴板功能

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

原创最新推荐文章于 2025-06-19 18:09:42 发布 · 905 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

`vue-clipboard2` 和 `vue-clipboard的区别:`

vue-clipboard2 和 vue-clipboard 都是 Vue.js 的剪贴板库，但它们有一些区别。以下是主要的不同点：

vue-clipboard2:

基于 Clipboard.js 实现。
提供了更简洁的 API，利用 Vue 的指令系统
支持异步操作、事件处理等。
适合用于大多数常见的剪贴板操作。
更新更频繁，社区活跃度较高。
文档相对全面，解决方案和示例更丰富。

vue-clipboard:

更早期的实现，也基于 Clipboard.js，但功能较为基础。
API 不够简洁，且使用方式相对较复杂。
可能不支持某些 Vue 的现代功能。
维护较少，可能在新版本的 Vue 中出现兼容性问题。

大多数情况下推荐使用 vue-clipboard2，因为它提供了更好的支持、更简单的 API 和更活跃的维护，使得在开发过程中更加顺利。

实现粘贴复制功能：

一：安装插件并引入

npm install --save vue-clipboard2

在main.js中引入本文是Vue3写法

import VueClipBoard from 'vue-clipboard2' //剪贴板库

app.use(VueClipBoard)

二：在页面中使用

第一种方法（推荐）:

<el-tooltip content="复制" placement="top" effect="light">
   <el-icon style="margin-left: 5px;cursor: pointer;" color="#409EFF"         
   @click="handleCopyData(scope.row.number)"><DocumentCopy /></el-icon>
</el-tooltip>

最主要的是使用浏览器的 navigator.clipboard.writeText()这个方法

如果你仍在使用 Vue 2，可以考虑迁移到其他支持 Vue 2 的剪贴板库，或者直接使用 navigator.clipboard.writeText 方法。
如果你使用的是 Vue 3，可以直接使用 navigator.clipboard.writeText 方法，因为现代浏览器已经广泛支持该 API。

const copyData = (val) => {
    proxy.$copyText(val).then(() => {
      proxy.ElMessage.success('复制成功')
    }).catch(() => {
      proxy.ElMessage.error('复制失败')
    })
}

第二种方法：

<button v-clipboard:copy="scope.row.number" v-clipboard:success="copySuccess"
 v-clipboard:error="copyError">复制</button>

const copySuccess = () => {
      proxy.ElMessage.success('复制成功')
}
const copyError = () => {
  proxy.ElMessage.error('复制失败')
}

这个方法我使用并没有生效，所以我使用了第一种方法