Replication mainstream implementation

At present, there are four main ways of copy: ZeroClipboard.js, Clipboard.js, execCommand

Differences in replication

ZeroClipboard: it's the most compatible. It can be fully compatible with chrome/firefox/ie/safari, but the plug-in is large, 230KB. The implementation method is flash method. By loading a flash and letting it access the system clipboard, the permission limit of most systems can be bypassed.
Clipboard.js is relatively small, 4KB, compatible with chrome / FF / IE > 9 / safari.
execCommand: compatible with new version of chrome / FF / IE > 9 / safari. execCommand is a document method, which is a good thing.

Copy implementation code

Skip ZeroClipboard.js here

Clipboard.js code

html:

<p>xxxx: 
    <span id="receiptNo">${receiptNo}</span> 
    <span id="copyboard" class="" data-clipboard-target="#receiptNo">copy</span> 
</p>

js:

<script src="dist/clipboard.min.js"></script>
  if(window.addEventListener && $("#copyboard").length>0){     
    var clipboard = new Clipboard('#copyboard');
    clipboard.on('success', function(e) {
      layer.tips('Already copied', '#copyboard');
      e.clearSelection();
    });
  }else{ 
    $("#copyboard").click(function(){
      alert("Replication is not supported IE9 Please copy the following version manually!");
    }); 
  }

execCommand code

html

<span class="copy" @click="copyToClipBoard()">copy</span>
<input type="text" id="copyLink" disabled="disabled" value=" ">

js

// Copy to Clipboard 
        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('Replication success', '.copy', {
                tips: [1, '#12a4e5'],
                time: 2000
            });
        },