前端复制功能实现

复制主流实现方式

目前copy主流有四种方式：ZeroClipboard.js，Clipboard.js，execCommand

各种复制的区别

ZeroClipboard：兼容性最好，能全面兼容chrome/firefox/ie/safari,但是插件体积大，为230KB。实现方式是flash法，通过加载一个flash，让其访问系统剪贴板来绕过绝大多数系统的权限限制。
Clipboard.js 体积相对小，4KB，兼容性可以接受，兼容chrome/ FF/ IE>9/ Safari新版。
execCommand ：兼容chrome/ FF/ IE>9/ Safari新版，execCommand是document方法，是个好东西。

复制实现代码

在这里略过ZeroClipboard.js.

Clipboard.js代码

html：

<p>xxxx：
    <span id="receiptNo">${receiptNo}span> 
    <span id="copyboard" class="" data-clipboard-target="#receiptNo">复制span> 
p>

js：

  if(window.addEventListener && $("#copyboard").length>0){     
    var clipboard = new Clipboard('#copyboard');
    clipboard.on('success', function(e) {
      layer.tips('已复制', '#copyboard');
      e.clearSelection();
    });
  }else{ 
    $("#copyboard").click(function(){
      alert("复制功能不支持IE9以下版本，请手动复制！");
    }); 
  }

execCommand代码

html

class="copy" @click="copyToClipBoard()">复制
type="text" id="copyLink" disabled="disabled" value=" ">

js

// 复制到粘贴板
        copyToClipBoard: function() {
            $("#copyLink").attr({
                value: this.receiptNo,
                disabled: false
            });
            document.getElementById("copyLink").select();
            document.execCommand("copy", false, null);
            $("#copyLink").attr({
                value: ' ',
                disabled: true
            });
            layer.tips('复制成功', '.copy', {
                tips: [1, '#12a4e5'],
                time: 2000
            });
        },