clipboard.js 是一個不需要flash，將文本復制到剪貼板的插件。下面給大家介紹Vue中使用clipboard實現復制功能，具體內容如下所示：
首先現在Vue中引入clipboard
npm install clipboard --save
在需要使用的組件中import 引入clipboard
import Clipboard from 'clipboard';
clipboard的實際使用
不論是單按鈕復制還是多按鈕復制，一定要在頁面加載DOM完成后先New出來具有復制功能的按鈕，如果在函數內再New那么可能會出現點擊復制按鈕兩次，才復制成功的現象，如下：
mounted() { var copybtn = document.getElementsByClassName('btn') this.clipboard = new Clipboard(copybtn); }<!--并不一定非要在mounted中也可以在其他周期內，只要頁面已經加載完DOM即可，如果是動態生成可以使用nextTick中New。-->
綁定復制內容的方式有以下幾種：
<!--第一種直接綁定在按鈕上--> <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2" @click="copy()">復制 </button><!--第二種單個復制按鈕動態獲取需要復制的內容--><input type="text" v-model="copyContent" id="copy_text" style="opacity: 0"><button ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">復制</button><!--第三種可以在New Clipboard時設定要復制的內容-->new Clipboard('copyBtn',function(){ return <!--要復制的內容-->})copy(){ let _this = this <!--如果在內部new會出現點擊兩次在復制成功的現象所以還請各位多多注意--> clipboard.on('success', function () { Toast('復制成功') _this.destroy() <!--銷毀緩存,然后在重新new這樣不會出現點擊復制上出現之前復制的內容的情況--> _this.clipboard = new Clipboard(copyBtn); }) clipboard.on('error', function () { Toast('復制失敗，請手動復制') }) }總結
以上所述是小編給大家介紹的Vue中使用clipboard實現復制功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
