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