需求
創(chuàng)新互聯(lián)公司基于成都重慶香港及美國等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬，聯(lián)通大帶寬，移動大帶寬，多線BGP大帶寬租用,是為眾多客戶提供專業(yè)成都IDC機(jī)房托管報價，主機(jī)托管價格性價比高，為金融證券行業(yè)服務(wù)器托管，ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享，G口帶寬及機(jī)柜租用的專業(yè)成都idc公司。
最近在做商城項(xiàng)目，有個需求是需要點(diǎn)擊復(fù)制訂單號的，然后就覺得可以使用原生的復(fù)制方法和使用第三方庫。
瀏覽器原生方法
這種方式兼容性不是太好，還要看瀏覽器是否支持，容易采坑。
重慶分公司
重慶分公司
//在IE中可以用window.clipboardData.setData('text','內(nèi)容')實(shí)現(xiàn)。
//在IE中clipboardData是window的屬性,而其他瀏覽器則是相應(yīng)的event對象的屬性，這實(shí)際上是一種安全措施，防止未經(jīng)授權(quán)的訪問,為了兼容其他瀏覽器，所以我們不能通過clipboardData來實(shí)現(xiàn)這種操作。
//具體做法：
//1.創(chuàng)建一個隱藏的input框
//2.點(diǎn)擊的時候，將要復(fù)制的內(nèi)容放進(jìn)input框中
//3.選擇文本內(nèi)容input.select()
//4.這里只能用input或者textarea才能選擇文本。
//5.執(zhí)行瀏覽器的復(fù)制命令document.execCommand("copy")。
function copyText() {
var text = document.getElementById("text").innerText; // 獲取要復(fù)制的內(nèi)容也可以傳進(jìn)來
var input = document.getElementById("input"); // 獲取隱藏input的dom
input.value = text; // 修改文本框的內(nèi)容
input.select(); // 選中文本
document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令
alert("復(fù)制成功");
}
//在事件中可以通過e 對內(nèi)容進(jìn)行修飾
document.body.oncopy = e => {
// 監(jiān)聽全局復(fù)制 做點(diǎn)什么
}
// 還有這種寫法：
document.addEventListener("copy", e => {
// 監(jiān)聽全局復(fù)制 做點(diǎn)什么
});
使用 clipboard.js
我們要先安裝
npm install clipboard --save
在 mian.js 中引入，當(dāng)然我們也可以在用到的 .vue 中引入，因?yàn)槲也恢挂粋€地方用到了復(fù)制，所以直接在 main.js 里面引入了。
import clipboard from 'clipboard'; //注冊到vue原型上 Vue.prototype.clipboard = clipboard;
在需要的地方使用
//dom ···訂單編號： {{orderData.orderSn}}··· //js ··· copyLink() { let _this = this; let clipboard = new this.clipboard(".cobyOrderSn"); clipboard.on('success', function () { _this.$toast("復(fù)制成功") }); clipboard.on('error', function () { _this.$toast("復(fù)制失敗") }); } ···
當(dāng)然 clipboard.js 的功能可不止這么簡單，我們還可使用它進(jìn)行剪切，還可以通過它復(fù)制其他元素的值等，具體的使用可查看官方文檔： clipboard.js ;
小結(jié)
關(guān)于瀏覽器一鍵復(fù)制，推薦使用 clipboard.js 來做，因?yàn)楝F(xiàn)在原生方法兼容性并不是很好，而且 clipboard.js 文件并不大，但是卻可以幫我們做很多事情，減輕很多調(diào)試和避免采坑。以上只是記錄一下自己遇到的問題，如有錯誤，還請指正，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
