Vue 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式
更新時(shí)間：2019年11月09日 16:01:53 作者：shaneChow228
今天小編就為大家分享一篇Vue 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
介紹：
在做復(fù)制文檔功能時(shí)，考慮到是個(gè)不太會(huì)復(fù)用的小功能，最后選擇直接用 document.execCommand 方法實(shí)現(xiàn)。
在查閱資料時(shí)候，發(fā)現(xiàn)其他人都需要在頁(yè)面上寫(xiě)上結(jié)構(gòu)、ID。然后捕捉某個(gè)ID獲取內(nèi)容，感覺(jué)很不方便。
使用：
methods: {
copyShaneUrl(shareLink){
var input = document.createElement("input"); // 直接構(gòu)建input
input.value = shareLink; // 設(shè)置內(nèi)容
document.body.appendChild(_input); // 添加臨時(shí)實(shí)例
input.select(); // 選擇實(shí)例內(nèi)容
document.execCommand("Copy"); // 執(zhí)行復(fù)制
document.body.removeChild(_input); // 刪除臨時(shí)實(shí)例
}
}
方法代碼如上，然后綁定需要執(zhí)行當(dāng)前方法的按鈕
<li v-for="(item, index) in meetingList"> <button @click="copyShaneUrl(item.shareUrl)">復(fù)制分享鏈接</button> </li>
以上這篇Vue 實(shí)現(xiàn)復(fù)制功能,不需要任何結(jié)構(gòu)內(nèi)容直接復(fù)制方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)動(dòng)態(tài)樣式的多種方法匯總
本文要給大家介紹Vue實(shí)現(xiàn)動(dòng)態(tài)樣式的多種方法，下面給大家?guī)?lái)幾個(gè)案列，需要的朋友可以借鑒研究一下。2021-06-06
Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
vue打印的對(duì)象在瀏覽器中顯示的問(wèn)題分析
因?yàn)樵趘ue中對(duì)象都是用了代理重寫(xiě)了get,由于get重寫(xiě)也就導(dǎo)致了瀏覽器不能直接獲取到具體的值,因此才會(huì)在打印的時(shí)候?yàn)?..,手動(dòng)點(diǎn)擊展開(kāi)才顯示具體的值，這篇文章主要介紹了為什么vue打印的對(duì)象在瀏覽器中顯示,需要的朋友可以參考下2024-04-04
本文給大家詳細(xì)講述了Vue2.0中集成UEditor富文本編輯器的方法以及相關(guān)注意事項(xiàng)做了講述，有興趣的朋友學(xué)習(xí)下。2018-03-03
詳解vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot
本篇文章給大家通過(guò)代碼實(shí)例分析了vue.js數(shù)據(jù)傳遞以及數(shù)據(jù)分發(fā)slot的相關(guān)知識(shí)，有這方面興趣的朋友參考下吧。2018-01-01
Vue from-validate 表單驗(yàn)證的示例代碼
本篇文章主要介紹了Vue from-validate 表單驗(yàn)證的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問(wèn)題
這篇文章主要介紹了關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
這篇文章主要介紹了Vue中的table表單切換實(shí)現(xiàn)效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項(xiàng)的相關(guān)資料,vue中$root是用來(lái)訪(fǎng)問(wèn)根組件的,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
vue單頁(yè)緩存存在的問(wèn)題及解決方案(小結(jié))
這篇文章主要介紹了vue單頁(yè)緩存存在的問(wèn)題及解決方案(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09