下载

• csdn下载download.csdn.net/download/gu…
• 官网下载sourceforge.net/projects/cl…
• github下载github.com/zenorocha/c…

1 引入插件

  <script src="js/clipboard.js"></script>

2 使用

一个节点的复制

其中data-clipboard-text为复制内容

//html部分
 <div class="data-case flexccc">
    <img src="img/icon.png" alt="">
    <p>提交成功</p>
    <p>链接：<span>{{data.url}}</span></p>
    <p>提取码：<span>jcpx1</span></p>
</div>
<button type="text" class="btn-copy" :data-clipboard-text="data.url">一键复制</button>

 // 复制链接 js部分
    var btn = document.getElementsByClassName('btn-copy')[0];
    var clipboard = new Clipboard(btn);
    clipboard.on('success', function (e) {
      console.log(e);
    });
    clipboard.on('error', function (e) {
      console.log(e);
    });

多个节点复制

//html部分
    <button data-clipboard-text="1">Copy</button>
    <button data-clipboard-text="2">Copy</button>
    <button data-clipboard-text="3">Copy</button>

//js部分
    var btns = document.querySelectorAll('button');
    var clipboard = new Clipboard(btns);

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

扩展：

document.execCommand('copy')

//html代码
<input id='input_url' v-model='product_url' style='opacity: 0;position: absolute;' type="text">
<input v-model='product_url' disabled type="text">

//js代码
var input = $('#input_url');
input.select();
document.execCommand("Copy");

踩坑记录：

• input框不能有disabled属性
• 根据第一条扩展，input的width || height 不能为0；
• input框不能有hidden属性