H5实现使用clipboardjs复制页面信息至剪贴板

需求说明：在vue项目中，设置一个按钮，点击后将页面中某个信息复制到系统剪贴板。主要使用的clipboardjs插件

一、引入clipboardjs

可以使用npm命令安装，npm install clipboard --save
但我使用的方式是下载了该文件包，将clipboard.min.js放入项目某文件夹中

二、使用

1、在需要复制功能的页面引入该文件

import ClipboardJS from '@mvue/rights/common/util/clipboard.min.js

2、代码

// 页面内容
<div>
   <input class="copydiv" id="foo" :value="resourceCode" />  //复制resourceCode的值
    <button type="button" data-clipboard-target="#foo" class="ui-btn1 copybtn btn" @click="copyResourceId">复制券码</button>
</div>

//js
//复制券码
copyResourceId() {   
    var _this = this;
   	var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log("复制成功!");
        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.log("复制失败");
    }); 
},

ClipboardJS官网地址：https://clipboardjs.com/