国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

在vue使用clipboard.js進行一鍵復(fù)制文本的實現(xiàn)示例

2019-11-19 12:17:24
字體:
供稿:網(wǎng)友

需求

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

瀏覽器原生方法

這種方式兼容性不是太好,還要看瀏覽器是否支持,容易采坑。

//在IE中可以用window.clipboardData.setData('text','內(nèi)容')實現(xiàn)。//在IE中clipboardData是window的屬性,而其他瀏覽器則是相應(yīng)的event對象的屬性,這實際上是一種安全措施,防止未經(jīng)授權(quán)的訪問,為了兼容其他瀏覽器,所以我們不能通過clipboardData來實現(xiàn)這種操作。//具體做法://1.創(chuàng)建一個隱藏的input框//2.點擊的時候,將要復(fù)制的內(nèi)容放進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)容也可以傳進來  var input = document.getElementById("input"); // 獲取隱藏input的dom  input.value = text; // 修改文本框的內(nèi)容  input.select(); // 選中文本  document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令  alert("復(fù)制成功"); }//在事件中可以通過e 對內(nèi)容進行修飾document.body.oncopy = e => {  // 監(jiān)聽全局復(fù)制 做點什么} // 還有這種寫法:document.addEventListener("copy", e => { // 監(jiān)聽全局復(fù)制 做點什么});

使用 clipboard.js

我們要先安裝

npm install clipboard --save

在 mian.js 中引入,當(dāng)然我們也可以在用到的 .vue 中引入,因為我不止一個地方用到了復(fù)制,所以直接在 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("復(fù)制成功")   });   clipboard.on('error', function () {    _this.$toast("復(fù)制失敗")   }); }???

當(dāng)然 clipboard.js 的功能可不止這么簡單,我們還可使用它進行剪切,還可以通過它復(fù)制其他元素的值等,具體的使用可查看官方文檔: clipboard.js ;

小結(jié)

關(guān)于瀏覽器一鍵復(fù)制,推薦使用 clipboard.js 來做,因為現(xiàn)在原生方法兼容性并不是很好,而且 clipboard.js 文件并不大,但是卻可以幫我們做很多事情,減輕很多調(diào)試和避免采坑。以上只是記錄一下自己遇到的問題,如有錯誤,還請指正,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。

發(fā)表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發(fā)表
主站蜘蛛池模板: 阿坝县| 饶河县| 射阳县| 锡林郭勒盟| 定结县| 定南县| 武川县| 周口市| 荣成市| 汉寿县| 上犹县| 昌图县| 阿克陶县| 深水埗区| 塘沽区| 祥云县| 修武县| 桦川县| 望都县| 会同县| 北宁市| 个旧市| 鄂托克旗| 丹凤县| 山丹县| 盱眙县| 瑞丽市| 水富县| 米泉市| 邛崃市| 安宁市| 九龙县| 云阳县| 南丰县| 平湖市| 垣曲县| 临江市| 五大连池市| 嘉善县| 和顺县| 长阳|