手機瀏覽器 bubuko -s mage 地方 技術分享 分享圖片 效果 success

zeroclipboard是走的flash插件，手機瀏覽器是不支持的,所以不得不舍棄之，用clipboard，clipboard不需要flash就可以完成復制剪切等功能，而且可以兼容pc,移動端

首先要安裝：cnpm install clipboard --save

然後引入包

引入：import Clipboard from ‘clipboard‘;

這個人地方坑會報各種依賴丟失的錯，沒關系，用下面的方法可以拯救

項目：

.

代碼：

<span class="NetbarNumber">{{item.NetbarNumber}}</span> <button ref="copy" class="lr back-confirm btn" :data-clipboard-text="item.NetbarNumber" @click="copy" id="copy_text">復制key</button> 函數：

復制代碼：

copy: function () { var _this = this; var clipboard = new Clipboard(‘#copy_text‘);
clipboard.on(‘success‘, e => { alert("dd") // 釋放內存 clipboard.destroy() }) clipboard.on(‘error‘, e => { // 不支持復制 Message({ message: ‘該瀏覽器不支持自動復制‘, type: ‘warning‘ }); // 釋放內存 clipboard.destroy() }) } 最後的效果：

點擊“復制key”這個按鈕就會復制前面盒子裏面的東西啦

希望對你們有幫助啦

vue項目中做點擊按鈕復制文本框內容