700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue 使用clipboard实现内容复制到剪切板功能

vue 使用clipboard实现内容复制到剪切板功能

时间:2023-09-27 13:18:04

相关推荐

vue 使用clipboard实现内容复制到剪切板功能

效果图:

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;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。