在vue使用clipboard.js進行一鍵複製文本的實現示例

這篇文章主要介紹了在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("複製失敗")
   });
 }
···

當然 clipboard.js 的功能可不止這麼簡單，我們還可使用它進行剪切，還可以通過它複製其他元素的值等，具體的使用可查看官方文檔： clipboard.js ;

小結

關於瀏覽器一鍵複製，推薦使用 clipboard.js 來做，因爲現在原生方法兼容性並不是很好，而且 clipboard.js 文件並不大，但是卻可以幫我們做很多事情，減輕很多調試和避免採坑。以上只是記錄一下自己遇到的問題，如有錯誤，還請指正，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。