在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

1. 我們要先安裝

npm install clipboard --save

2. 在mian.js中引入，當然我們也可以在用到的.vue中引入，因爲我不止一個地方用到了複製，所以直接在main.js裏面引入了。

import clipboard from 'clipboard';
//註冊到vue原型上
Vue.prototype.clipboard = clipboard;

3. 在需要的地方使用

//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文件並不大，但是卻可以幫我們做很多事情，減輕很多調試和避免採坑。以上只是記錄一下自己遇到的問題，如有錯誤，還請指正，如有幫助，請關注點贊哈。