（前端）单号复制功能

（前端）单号复制功能

复制主流实现方式

目前copy主流有3种方式：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代码

1、引入clipboard.min.js

<script type="text/javascript" src="${(domainUrlUtil.EJS_REMOTE_STATIC_RESOURCES)!}/js/clipboard.min.js"></script>

js文件下载：clipboard.js

2、html（按钮、要复制的文本）

 快递单号：<span style="line-height: 25px;" id="receiptNo">${(order.logisticsNumber)!''}</span>
<button id="copyboard" data-clipboard-target="#receiptNo">复制</button>

3、js方法(新方法：ClipboardJS)

//复制
            if(window.addEventListener && $("#copyboard").length>0){
                var clipboard = new ClipboardJS('#copyboard');
                clipboard.on('success', function(e) {
                    //提示
                    $("#disappare").empty();    //清空原提示框的值
                    $("#disappare").append("复制成功");
                    $("#disappare").show(200).delay(3000).hide(100);    //提示框显示3秒
                    e.clearSelection();     //清空选中的样式
                });
            }else{
                $("#copyboard").click(function(){
                    $("#disappare").empty();    //清空原提示框的值
                    $("#disappare").append("复制功能不支持IE9以下版本，请手动复制！");
                    $("#disappare").show(200).delay(3000).hide(100);    //提示框显示3秒
                });
            }

execCommand代码

html

<span class="copy" @click="copyToClipBoard()">复制</span>
<input 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
            });
        },

原文链接:https://blog.youkuaiyun.com/ZYY88886666/article/details/80083309