寫在前面:clipboard是一個提供復制功能的插件,非常好用。
最近在項目中有一些復制的功能的需求,看了下clipboard這款插件提好用的,記錄一下。
1,npm install clipboard --save 先下一下插件;
2,我的項目是vue的,所以在你需要用到的頁面中引入一下
import Clipboard from 'clipboard'
3,比如要復制一個url鏈接在template里面需要給給綁定事件的元素綁定一個類名
<div>qbUrl:{{qb_url}}<Button type="primary" size="small" class="copy-qb" @click="copyQbUrl(qb_url)">復制</Button></div>
4,在methods中綁定的事件
copyQbUrl (url) { let clipboard = new Clipboard ('.copy-qb', { text: () => { return url } }) clipboard.on('success', () => { this.$Message.success('復制成功!') clipboard.destroy() }) clipboard.on('error', () => { this.$Message.success('復制失敗,請手動復制!') clipboard.destroy() }) }