效果图:
1.安装插件:
npm install clipboard --save
2.导入:
import Clipboard from 'clipboard';
3.data中声明变量
data() {return {clipboard : null,}}
4.create中创建:
created() {this.clipboard = new Clipboard('.copy-btn');this.clipboard.on('success', function (e) {message.success("复制成功:" + e.text);e.clearSelection();});this.clipboard.on('error', function (e) {message.error("复制失败");});}
5.代码中使用:
<!--流水号 --><template slot="code" slot-scope="text, record"><a class="code" @click="toWorkOrder(record)">{{text}}</a><button class="copy-btn" :data-clipboard-text="text"><a-icon type="copy" title="复制到剪切板"/></button></template><!--业务号码 --><template slot="businessNo" slot-scope="text">{{text}}<button class="copy-btn" :data-clipboard-text="text"><a-icon type="copy" title="复制到剪切板"/></button></template>
6.destroyed中销毁:
destroyed() {this.clipboard.destroy();},
7.css美化复制图标
.copy-btn {border: none;background-color: transparent;display: inline-block;cursor: pointer;}