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('复制失败')
}
这个方法我使用并没有生效,所以我使用了第一种方法