vue -- v-clipboard複製到剪下板的外掛 應用示例
阿新 • • 發佈：2021-09-07
本例針對的是移動端複製單個字串應用。
首先在專案安裝依賴：
npm install --save v-clipboard
其次在main.js引入如下：
import Clipboard from 'v-clipboard';
Vue.use(Clipboard)；
在頁面直接應用如下：
<button class="capyBtn" v-clipboard="() =>infoData.cardNumInfo" v-clipboard:success="clipboardSuccessHandler" v-clipboard:error="clipboardErrorHandler"> 複製卡號卡密 </button>
複製成功和失敗事件處理如下：
// 複製成功 clipboardSuccessHandler ({ value, event }){ let toast; if(value == this.infoData.cardNumInfo){ toast = '卡號卡密已複製到剪下板' } Toast({ message: toast, duration:1500 }); }, // 複製失敗 clipboardErrorHandler ({ value, event }) { Toast({ message: '複製失敗，請重試', duration: 1500 }); },
以上就可以了。