组件常用于web页的内容复制业务,原理是复制进剪切板内,使web页面上的内容能复制至web以外的软件上
1、安装组件
npm install clipboard --save
2、加载组件
import Clipboard from 'clipboard'
3、编写复制事件(.copybtn为绑定该事件按钮的类名)
copy() { let clipboard = new Clipboard('.copybtn') clipboard.on('success', e => { console.log('复制成功') clipboard.destroy() }) clipboard.on('error', e => { console.log('复制失败') clipboard.destroy() }) }
4、 绑定复制事件(此处使用vue和mintUI库,其他类似)
<span>{{cardMsg.toName}}</span>
<mt-button class="copybtn" size="small" plain type="primary" :data-clipboard-text="cardMsg.toName" @click="copy">复制</mt-button>