首先是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窗,原因是粘貼板對象未被釋放。