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

最新推荐文章于 2024-10-15 13:16:49 发布

你眼中的柔情

最新推荐文章于 2024-10-15 13:16:49 发布

阅读量402

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/return_js/article/details/127612659

vue 专栏收录该内容

22 篇文章

订阅专栏

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

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

一、引入插件

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()
      })
    },

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