动态复制文字

通过点击复制触发接口，并将返回的数据复制到粘贴板上。

1、通过原生js编写需通过input的方式作为中间件实现。

<div onclick="copyContact()">点击复制</div>
  </div>
  <script>
    function copyContact() {
        var oInput = document.createElement('input');
        oInput.value = "需复制的文字";//文字
        document.body.appendChild(oInput);
        oInput.select();
        document.execCommand("Copy");
    }
  </script>

input不能使用display：none隐藏或者hidden属性。

2、clipboard.js插件，通过该插件可以将输入框，文本域，DIV元素中的文本等文本内容复制或者剪切到剪贴板中 。

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

实现复制或剪切某一个元素的值，可通过配置一下两个属性实现（节点不能通过display隐藏，或者input不能hidden。若不想页面有显示可通过函数式实现）

• data-clipboard-target指向需复制或剪切的节点
• data-clipboard-action方法，提供复制copy、剪切cut。默认copy

<!-- input复制 -->
    <input id="foo" type="text" value="Copy">
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>
    <!-- textare剪切 -->
    <textarea id="bar">Cut</textarea> 
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut</button>
    <!-- div复制 -->
    <div>hello_div_Copy</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>
//   js
    var clipboards = new ClipboardJS('.btn');
    clipboards.on('success', function(e) {
        alert("链接复制成功");
    });
    clipboards.on('error', function(e) {
        console.log(e);
    });

通过属性返回需复制或剪切的值，需配置data-clipboard-text属性

<div class="btn" data-clipboard-text="1">
        <span>Copy_attr_text</span>
 </div>
 //   js
    var clipboards = new ClipboardJS('.btn');
    clipboards.on('success', function(e) {
        alert("链接复制成功");
    });
    clipboards.on('error', function(e) {
        console.log(e);
    });

通过方法的形式配置target返回需复制的节点或者text返回需复制的值。可以通过该方法实现复制通过接口返回的数据

function copyContact() {
        let clipboard = new ClipboardJS('#btn_Share', {
            text: function () {
                return '文本';
            }
        });
    }
    
    function copyContact_target(){
        let clipboard = new ClipboardJS('#btn_share_target', {
            target: function () {
                return  document.querySelector('#div');
            }
        });
    }

你也可以通过运行ClipboardJS.isSupported()，来检查是否支持就可以显示/隐藏按钮

可通过clipboard.destroy()清除实例