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

需求

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

浏览器原生方法

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

//在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("复制失败")

});

}

···

当然 clipboard.js 的功能可不止这么简单,我们还可使用它进行剪切,还可以通过它复制其他元素的值等,具体的使用可查看官方文档: clipboard.js ;

小结

关于浏览器一键复制,推荐使用 clipboard.js 来做,因为现在原生方法兼容性并不是很好,而且 clipboard.js 文件并不大,但是却可以帮我们做很多事情,减轻很多调试和避免采坑。以上只是记录一下自己遇到的问题,如有错误,还请指正,希望对大家的学习有所帮助,也希望大家多多支持。

以上是 在vue使用clipboard.js进行一键复制文本的实现示例 的全部内容, 来源链接: utcz.com/z/348069.html

回到顶部