vue 使用clipboard实现复制功能

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

转载最新推荐文章于 2025-06-19 18:09:42 发布 · 2.3k 阅读

文章标签：

#js复制

前端小技巧同时被 3 个专栏收录

40 篇文章

订阅专栏

40 篇文章

订阅专栏

vue

21 篇文章

订阅专栏

本文介绍如何在Vue项目中利用Clipboard.js实现文本复制功能。通过安装、导入并配置Clipboard.js，使得用户可以通过点击按钮来复制预设的文本内容。文章还提供了一个简单的示例代码，演示了如何监听复制成功的事件及处理不支持复制的情况。

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

在vue中使用clipboard.js 时候发现一个问题，如果移动端不是input或者button，则复制不成功，使用步骤如下

1. 引入clipboard.js

    [html] 
    view plaincopy
npm install clipboard --save  

2. 在需要使用的组件中import

    [javascript] 
    view plaincopy
import Clipboard from 'clipboard';  

3. 添加需要复制的内容

    [html] 
    view plaincopy
<button class="tag-read" data-clipboard-text="我是可以复制的内容，啦啦啦啦" @click="copy">立即阅读</button>  

    [javascript] 
    view plaincopy
copy() {  
        var clipboard = new Clipboard('.tag-read')  
        clipboard.on('success', e => {  
          console.log('复制成功')  
          // 释放内存  
          clipboard.destroy()  
        })  
        clipboard.on('error', e => {  
          // 不支持复制  
          console.log('该浏览器不支持自动复制')  
          // 释放内存  
          clipboard.destroy()  
        })  
      }  