关于web复制组件 Clipboard（vue框架下）

网页内容复制组件使用指南

最新推荐文章于 2025-08-07 18:50:13 发布

原创最新推荐文章于 2025-08-07 18:50:13 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

综合专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种用于网页内容复制的组件实现方法，通过安装并配置Clipboard.js库，可以轻松实现网页元素到剪切板的复制功能。文章详细解释了安装、加载组件的过程，并给出了具体的复制事件编写实例。

组件常用于web页的内容复制业务，原理是复制进剪切板内，使web页面上的内容能复制至web以外的软件上

1、安装组件

npm install clipboard --save

2、加载组件

import Clipboard from 'clipboard'

3、编写复制事件（.copybtn为绑定该事件按钮的类名）

copy() {
  let clipboard = new Clipboard('.copybtn')
  clipboard.on('success', e => {
    console.log('复制成功')
    clipboard.destroy()
  })
  clipboard.on('error', e => {
    console.log('复制失败')
    clipboard.destroy()
  })
}

4、绑定复制事件（此处使用vue和mintUI库，其他类似）

<span>{{cardMsg.toName}}</span>
<mt-button class="copybtn" size="small" plain type="primary" :data-clipboard-text="cardMsg.toName" @click="copy">复制</mt-button>