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à)值，希望對大家有所幫助。一起跟隨小編過來看看吧
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-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題
這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報(bào)錯(cuò)問題的解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
vue編寫的功能強(qiáng)大的swagger-ui頁面及使用方式
swagger是一種標(biāo)準(zhǔn)的數(shù)據(jù)格式的定義，對于不同語言進(jìn)行實(shí)現(xiàn)一些注解API式的東西，能快速生成這種描述restful格式的api信息的json串，本文給大家詳細(xì)介紹vue編寫的功能強(qiáng)大的swagger-ui頁面，感興趣的朋友跟隨小編一起看看吧2022-02-02
這篇文章主要介紹了vue 設(shè)置路由的登錄權(quán)限的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue中兄弟組件傳值的兩種方式小結(jié)，具有很好的參考價(jià)值，希望對大家有所幫助。2022-07-07
這篇文章主要介紹了講解vue-router之什么是嵌套路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue開發(fā)table數(shù)據(jù)合并實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue開發(fā)table數(shù)據(jù)合并實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了Vue關(guān)于訪問外鏈?zhǔn)〉膯栴}，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要介紹了Vue 中使用富文本編譯器wangEditor3的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
在做文字處理的項(xiàng)目時(shí)經(jīng)常會(huì)遇到搜索文字并高亮的需求,本文就來介紹vue 指定文字高亮的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之自定義指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12