vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法
1 . npm安裝到項(xiàng)目目錄文件中
npm install clipboard --save
2 . import 引入文件
import Clipboard from 'clipboard';
3 . 在需要html元素中的自定義屬性中data-clipboard-text 中寫入要復(fù)制的內(nèi)容
<button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="text">復(fù)制地址</button>
4 . 在JavaScript中通過類名找到元素中的內(nèi)容。
let clipboard = new Clipboard('.copyBtn');
就是這個(gè)樣子了,如果需要這個(gè)地址,直接在方法中引用clipboard這個(gè)變量就可以了,不需要的話就不用管這個(gè)變量,它不需要做任何處理,單擊那個(gè)類名為copyBtn的按鈕以后,直接Ctrl+v就可以了.
以上這篇vue 實(shí)現(xiàn)復(fù)制內(nèi)容到粘貼板clipboard的方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
使用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)步驟
通過本文,您可以了解如何使用Vue CLI創(chuàng)建Vue 3項(xiàng)目,配置Vite,利用其優(yōu)勢(shì)進(jìn)行開發(fā),具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08Vue 2.0+Vue-router構(gòu)建一個(gè)簡單的單頁應(yīng)用(附源碼)
這篇文章主要給大家介紹了基于Vue 2.0+Vue-router構(gòu)建了一個(gè)簡單的單頁應(yīng)用,文中通過實(shí)例介紹的非常詳細(xì),并在文末給出了源碼下載,需要的朋友可以下載學(xué)習(xí)參考,下面來一起看看吧。2017-03-03