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ì)大家有所幫助。一起跟隨小編過來看看吧
介紹：
在做復(fù)制文檔功能時(shí)，考慮到是個(gè)不太會(huì)復(fù)用的小功能，最后選擇直接用 document.execCommand 方法實(shí)現(xiàn)。
在查閱資料時(shí)候，發(fā)現(xiàn)其他人都需要在頁面上寫上結(jié)構(gòu)、ID。然后捕捉某個(gè)ID獲取內(nèi)容，感覺很不方便。
使用：
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之prop與$emit的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
flv.js是一個(gè)用于在瀏覽器中解碼和播放FLV視頻的JavaScript庫(kù),它可以將FLV視頻流解碼并顯示在HTML5的video元素中,從而實(shí)現(xiàn)在瀏覽器中直接播放FLV格式的視頻文件,本文給大家介紹flv.js在vue中的使用,感興趣的朋友一起看看吧2023-11-11
vue3+xgplayer實(shí)現(xiàn)短視頻功能詳解
短視頻應(yīng)用的流暢性和用戶交互性在用戶體驗(yàn)中扮演著重要角色,本文將展示如何通過?Vue?3?和?XGPlayer來實(shí)現(xiàn)這些功能,感興趣的小伙伴可以了解下2025-02-02
vscode+vue cli3.0創(chuàng)建項(xiàng)目配置Prettier+eslint方式
這篇文章主要介紹了vscode+vue cli3.0創(chuàng)建項(xiàng)目配置Prettier+eslint方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue中動(dòng)態(tài)組件使用及傳值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
指令是Vue模板中最常用的一項(xiàng)功能，它帶有前綴v-，主要職責(zé)是當(dāng)其表達(dá)式的值改變時(shí)，相應(yīng)的將某些行為應(yīng)用在 DOM 上。這篇文章主要介紹了vue內(nèi)置指令詳解,需要的朋友可以參考下2018-04-04
Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解
在實(shí)際業(yè)務(wù)中，我們常用圖表來做數(shù)據(jù)統(tǒng)計(jì)，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來達(dá)到一目了然的數(shù)據(jù)查看，但在大屏開發(fā)過程中，常會(huì)因?yàn)檫m配不同屏幕而感到困擾，下面我們來解決一下這個(gè)不算難題的難題2022-11-11
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了Vue CLI2升級(jí)至Vue CLI3的方法步驟,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了Vue基礎(chǔ)語法知識(shí)梳理，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12