vue 復制內容到粘貼板


  首先是npm安裝依賴包:npm install clipboard --save

  導入組件:import Clipboard from "clipboard";

  html如圖:

  

  class="copy",用於下面的JS中獲取當前復制按鈕這個對象,data-clipboard-text是表示復制當前的屬性,屬性值我這里用的變量Code,大家注意一下,data-clipboard-text前面帶上 " :"號,否則Code會被視作字符串處理,而非自定義的變量。@click綁定了一個自定義的copy事件,下面我們看一下:

  

  copy事件里,通過on給復制按鈕綁定了兩個事件,success和error,分別是復制成功和失敗,考慮到潛在的兼容性問題,最好留下error提示,比較友好。

 

  以上就是vue項目里復制粘貼的教程,如果幫助到了你,請點個贊喲。

   附上Github詳細教程:https://github.com/zenorocha/clipboard.js


   

  2019年5月9日17:18:45 BUG修復:

  

  message下面改成如圖所示,才是正確的清理方式, 否則重復點擊會一直彈message窗,原因是粘貼板對象未被釋放。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM