在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("复制失败")
});
}
···
2021-5-6更新
在vue3.x版本vue-cli4.5版本中使用方法更新
main.js引入并注册到原型链上
import clipboard from 'clipboard';
app.config.globalProperties.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
···
// 复制
const clipboard = getCurrentInstance().ctx.clipboard;
const copyLink = () => {
let clipboard2 = new clipboard(".cobyOrderSn");
clipboard2.on("success", function (e) {
ElMessage.success("复制成功");
// 清空选中的内容
e.clearSelection();
// 销毁实例
clipboard2.destroy();
});
clipboard2.on("error", function (e) {
ElMessage.success("复制失败");
e.clearSelection();
clipboard2.destroy();
});
};
···
![](https://isxch.com/wp-content/uploads/2021/05/image.png)
当然clipboard.js
的功能可不止这么简单,我们还可使用它进行剪切,还可以通过它复制其他元素的值等,具体的使用可查看官方文档:clipboard.js;
转载出处:https://www.jianshu.com/p/8814d526bca9
打赏作者
![](https://isxch.com/wp-content/uploads/2020/11/weixin_code.jpg)
微信
![](https://isxch.com/wp-content/uploads/2020/11/zhifubaoCode.png)
支付宝