vue 使用clipboard实现复制功能

最新推荐文章于 2025-05-21 14:08:39 发布

云烟溪雪

最新推荐文章于 2025-05-21 14:08:39 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：组件

原文链接：https://blog.youkuaiyun.com/guxuehua/article/details/79169190

组件专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种在不同浏览器间实现文本复制的方法，包括使用原生浏览器方法的兼容性问题及解决方案，通过创建隐藏input框并利用document.execCommand实现复制，以及引入clipboard.js库简化复制操作，适用于前端开发者。

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

浏览器原生方法
这种方式兼容性不是太好，还要看浏览器是否支持，容易采坑。

//在IE中可以用window.clipboardData.setData('text','内容')实现。
//在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性，这实际上是一种安全措施，防止未经授权的访问,为了兼容其他浏览器，所以我们不能通过clipboardData来实现这种操作。
//具体做法：
//1.创建一个隐藏的input框
//2.点击的时候，将要复制的内容放进input框中
//3.选择文本内容input.select()
//4.这里只能用input或者textarea才能选择文本。
//5.执行浏览器的复制命令document.execCommand("copy")。
 function copyText() {
   var text = document.getElementById("text").innerText; // 获取要复制的内容也可以传进来
   var input = document.getElementById("input"); // 获取隐藏input的dom
   input.value = text; // 修改文本框的内容
   input.select(); // 选中文本
   document.execCommand("copy"); // 执行浏览器复制命令
   alert("复制成功");
 }

//在事件中可以通过e 对内容进行修饰
document.body.oncopy = e => {
   // 监听全局复制 做点什么
}
 // 还有这种写法：
document.addEventListener("copy", e => {
  // 监听全局复制 做点什么
});

引入clipboard.js，官方文档：https://clipboardjs.com/

npm install clipboard --save

在需要使用的组件中import

 import Clipboard from 'clipboard';

添加需要复制的内容

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

method中添加copy方法

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

动态获取需要复制的内容

<input type="text" v-model="copyContent"  id="copy_text" style="opacity: 0">
<button ref="copy"  data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">复制</button>

复制

this.copyBtn = new this.$clipboard(this.$refs.copy)

  copy () {
      let _this = this
      let clipboard = _this.copyBtn
      clipboard.on('success', function () {
        Toast('复制成功')
      })
      clipboard.on('error', function () {
        Toast('复制失败，请手动复制')
      })
    }

点击非文本框，自动复制，代码如下

<span id="bar" class="btn" data-clipboard-target="#bar">value</span>
<script src="clipboard.min.js"></script>
<script>
    //init
    var clipboard = new Clipboard('.btn');
    //优雅降级:safari 版本号>=10,提示复制成功;否则提示需在文字选中后，手动选择“拷贝”进行复制
    clipboard.on('success', function(e) {
        alert('复制成功!');
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        alert('请选择“拷贝”进行复制!')
    });
</script>

剪切，把data-clipboard-action设置为cut

 <!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>