需求

最近在做商城項目，有個需求是需要點擊復制訂單號的，然后就覺得可以使用原生的復制方法和使用第三方庫。

瀏覽器原生方法

這種方式兼容性不是太好，還要看瀏覽器是否支持，容錯新坑。

//在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 文件并不大，但是卻可以幫我們做很多事情，減輕很多調試和避免采坑。以上只是記錄一下自己遇到的問題，如有錯誤，還請指正，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。