在vue使用clipboard.js進(jìn)行一鍵復(fù)制文本的實(shí)現(xiàn)示例
需求
最近在做商城項(xiàng)目,有個(gè)需求是需要點(diǎn)擊復(fù)制訂單號(hào)的,然后就覺(jué)得可以使用原生的復(fù)制方法和使用第三方庫(kù)。
瀏覽器原生方法
這種方式兼容性不是太好,還要看瀏覽器是否支持,容易采坑。
//在IE中可以用window.clipboardData.setData('text','內(nèi)容')實(shí)現(xiàn)。 //在IE中clipboardData是window的屬性,而其他瀏覽器則是相應(yīng)的event對(duì)象的屬性,這實(shí)際上是一種安全措施,防止未經(jīng)授權(quán)的訪問(wèn),為了兼容其他瀏覽器,所以我們不能通過(guò)clipboardData來(lái)實(shí)現(xiàn)這種操作。 //具體做法: //1.創(chuàng)建一個(gè)隱藏的input框 //2.點(diǎn)擊的時(shí)候,將要復(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)來(lái) var input = document.getElementById("input"); // 獲取隱藏input的dom input.value = text; // 修改文本框的內(nèi)容 input.select(); // 選中文本 document.execCommand("copy"); // 執(zhí)行瀏覽器復(fù)制命令 alert("復(fù)制成功"); } //在事件中可以通過(guò)e 對(duì)內(nèi)容進(jìn)行修飾 document.body.oncopy = e => { // 監(jiān)聽(tīng)全局復(fù)制 做點(diǎn)什么 } // 還有這種寫法: document.addEventListener("copy", e => { // 監(jiān)聽(tīng)全局復(fù)制 做點(diǎn)什么 });
使用 clipboard.js
我們要先安裝
npm install clipboard --save
在 mian.js 中引入,當(dāng)然我們也可以在用到的 .vue 中引入,因?yàn)槲也恢挂粋€(gè)地方用到了復(fù)制,所以直接在 main.js 里面引入了。
import clipboard from 'clipboard'; //注冊(cè)到vue原型上 Vue.prototype.clipboard = clipboard;
在需要的地方使用
//dom ··· <div class="sn Lfll Lmr20">訂單編號(hào): <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 的功能可不止這么簡(jiǎn)單,我們還可使用它進(jìn)行剪切,還可以通過(guò)它復(fù)制其他元素的值等,具體的使用可查看官方文檔: clipboard.js ;
小結(jié)
關(guān)于瀏覽器一鍵復(fù)制,推薦使用 clipboard.js 來(lái)做,因?yàn)楝F(xiàn)在原生方法兼容性并不是很好,而且 clipboard.js 文件并不大,但是卻可以幫我們做很多事情,減輕很多調(diào)試和避免采坑。以上只是記錄一下自己遇到的問(wèn)題,如有錯(cuò)誤,還請(qǐng)指正,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目中如何封裝axios(統(tǒng)一管理http請(qǐng)求)
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中如何封裝axios(統(tǒng)一管理http請(qǐng)求)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05Vue項(xiàng)目中使用iView組件庫(kù)設(shè)置樣式不生效的解決方案
這篇文章主要介紹了Vue項(xiàng)目中使用iView組件庫(kù)設(shè)置樣式不生效的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue純前端實(shí)現(xiàn)導(dǎo)出Excel并修改樣式
這篇文章主要為大家詳細(xì)介紹了Vue如何利用xlsx-style庫(kù)實(shí)現(xiàn)導(dǎo)出Excel并修改樣式的功能,文中的示例代碼講解詳細(xì),有需要的可以參考下2024-01-01Vue中的transition封裝組件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue中的transition封裝組件的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08vue 自定指令生成uuid滾動(dòng)監(jiān)聽(tīng)達(dá)到tab表格吸頂效果的代碼
這篇文章主要介紹了vue 自定指令生成uuid滾動(dòng)監(jiān)聽(tīng)達(dá)到tab表格吸頂效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-09Vue Router4中params傳參失效和報(bào)錯(cuò)問(wèn)題的解決方法
在使用vue-router4中params 進(jìn)行路由組件之間傳參,跳轉(zhuǎn)頁(yè)面接收不了并報(bào)錯(cuò),本文給大家介紹了Vue Router4中params傳參失效和報(bào)錯(cuò)問(wèn)題的解決方法,需要的朋友可以參考下2024-03-03vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法
今天小編就為大家分享一篇vue--點(diǎn)擊當(dāng)前增加class,其他刪除class的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09Vue3中無(wú)法為el-tree-select設(shè)置反選問(wèn)題解析
這篇文章主要介紹了Vue3中無(wú)法為el-tree-select設(shè)置反選問(wèn)題分析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04