Vue2.x中实现点击复制文字

最新推荐文章于 2025-10-23 18:38:30 发布

原创最新推荐文章于 2025-10-23 18:38:30 发布 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #javascript #vue.js

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了在Vue项目中利用clipboard库实现点击复制文字的方法。首先通过npm安装clipboard，然后在需要复制的元素上设置data-clipboard-text属性绑定要复制的内容，并在methods中定义复制方法。成功复制后使用Element UI的message组件给出提示，同时销毁clipboard实例以释放内存。示例代码展示了如何在点击图片图标时复制h2标签中的文本。

Vue中实现点击复制文字

一、问题

点击文字右侧的图标进行复制文字内容，成功后给予提示，方便用户粘贴

二、解决

利用clipboard库实现
首先安装clipboard
```
npm install clipboard --save
```

之后在点击的元素中（这里是一个图标），通过data-clipboard-text属性动态绑定需要复制的内容（也就是h2标签中的文本内容），这里非常关键，一定不要把关系搞混了！

<div>
     <h2>{{name}}</h2>
     <img class="task_name" :data-clipboard-text="name" @click="copyName" src="@/assets/image/task/copy.png" alt="copy" />
</div>

data(){
    return{
        name: '成立100年' // 这里做实例用，后面调用接口数据效果相同
    }
},
methods:{
     // 复制任务名称
    copyName() {
      let clipboard = new Clipboard('.task_name')
      clipboard.on('success', e => {
        this.$message.success("复制成功") // 利用Element组件给予成功提示
        clipboard.destroy() // 释放内存 
      })
      clipboard.on('error', e => {
        this.$message.error('该浏览器不支持自动复制') // 给予错误提示信息
        clipboard.destroy() // 释放内存
      })
    },
}