vue使用clipboard插件实现复制功能

最新推荐文章于 2025-10-21 16:25:01 发布

原创最新推荐文章于 2025-10-21 16:25:01 发布 · 455 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

22 篇文章

订阅专栏

博客介绍了前端复制插件的使用方法，包括引入插件以及在使用页面引入，还提到在 HTML 中使用 data - clipboard - text 作为复制内容，且值为空时无法复制。

一、引入插件

cnpm install clipboard --save

二、在使用的页面引入

import Clipboard from 'clipboard';

html:
data-clipboard-text 是复制的内容

 <a-icon type="copy" class="tag-read" :data-clipboard-text="form.drlContentString" @click="copy" />

  copy() {
      const that = this;
      var clipboard = new Clipboard('.tag-read')
      clipboard.on('success', e => {
        that.copyed = true
        setTimeout(() => {
          that.copyed = false
        }, 500)
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },

注：如果值为空复制不上。