溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求
最近在做商城項目，有個需求是需要點擊復制訂單號的，然后就覺得可以使用原生的復制方法和使用第三方庫。
瀏覽器原生方法
這種方式兼容性不是太好，還要看瀏覽器是否支持，容易采坑。
//在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 文件并不大，但是卻可以幫我們做很多事情，減輕很多調試和避免采坑。以上只是記錄一下自己遇到的問題，如有錯誤，還請指正，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
