vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法
更新時(shí)間：2018年03月17日 11:03:01 作者：Call_me_small_pure
下面小編就為大家分享一篇vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
1 . npm安裝到項(xiàng)目目錄文件中
npm install clipboard --save
2 . import 引入文件
import Clipboard from 'clipboard';
3 . 在需要html元素中的自定義屬性中data-clipboard-text 中寫(xiě)入要復(fù)制的內(nèi)容
<button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="text">復(fù)制地址</button>
4 . 在JavaScript中通過(guò)類名找到元素中的內(nèi)容。
let clipboard = new Clipboard('.copyBtn');
就是這個(gè)樣子了，如果需要這個(gè)地址，直接在方法中引用clipboard這個(gè)變量就可以了，不需要的話就不用管這個(gè)變量，它不需要做任何處理，單擊那個(gè)類名為copyBtn的按鈕以后，直接Ctrl+v就可以了.
以上這篇vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue全局組件與局部組件的區(qū)別，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-06-06
使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能
這篇文章主要介紹了使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
使用vite構(gòu)建vue3項(xiàng)目的實(shí)現(xiàn)步驟
通過(guò)本文,您可以了解如何使用Vue CLI創(chuàng)建Vue 3項(xiàng)目,配置Vite,利用其優(yōu)勢(shì)進(jìn)行開(kāi)發(fā),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器,其實(shí)Pinia就是Vuex5,只不過(guò)為了尊重原作者的貢獻(xiàn)就沿用了名字Pinia,下面這篇文章主要給大家介紹了關(guān)于Vue.js狀態(tài)管理之Pinia與Vuex的相關(guān)資料,需要的朋友可以參考下2023-02-02
mini-vue渲染的簡(jiǎn)易實(shí)現(xiàn)
本文主要介紹了mini-vue渲染的簡(jiǎn)易實(shí)現(xiàn)，主要簡(jiǎn)單來(lái)實(shí)現(xiàn)一個(gè)虛擬dom渲染真實(shí)dom，以及更新的方法。具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
本文主要介紹了Vue不定高展開(kāi)動(dòng)效原理詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
組件（Component）是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。這篇文章主要介紹了vue.js 中的組件，需要的朋友參考下2018-02-02
vue @input和@click的區(qū)別及說(shuō)明
這篇文章主要介紹了vue @input和@click的區(qū)別及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了VUE 自定義取色器組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Vue 2.0+Vue-router構(gòu)建一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用（附源碼）
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用，文中通過(guò)實(shí)例介紹的非常詳細(xì)，并在文末給出了源碼下載，需要的朋友可以下載學(xué)習(xí)參考，下面來(lái)一起看看吧。2017-03-03