在vue使用clipboard.js进行一键复制文本的实现示例

Z时代
2024-01-10
分类：综合

需求

最近在做商城项目，有个需求是需要点击复制订单号的，然后就觉得可以使用原生的复制方法和使用第三方库。

浏览器原生方法

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


//在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

我们要先安装

npm install clipboard --save

在 mian.js 中引入，当然我们也可以在用到的 .vue 中引入，因为我不止一个地方用到了复制，所以直接在 main.js 里面引入了。


import clipboard from 'clipboard';
//注册到vue原型上
Vue.prototype.clipboard = clipboard;

在需要的地方使用


//dom
···
<div class="sn Lfll Lmr20">订单编号：
  <span data-clipboard-action="copy" class="cobyOrderSn" :data-clipboard-text="orderData.orderSn" @click="copyLink">{{orderData.orderSn}}</span>
 </div>
···
//js
···
 copyLink() {
   let _this = this;
   let clipboard = new this.clipboard(".cobyOrderSn");
   clipboard.on('success', function () {
    _this.$toast("复制成功")
   });
   clipboard.on('error', function () {
    _this.$toast("复制失败")
   });
 }
···