JS:实现点击复制

html

<div class="help2">
      <div class="xxx">银行卡信息:</div>
       <div class="xx">
      <div >开户行：<span id='khh'>招商银行</span></div>
      <button class="btn" data-clipboard-action="copy" >复制</button> 
      </div>

     <div class="xx" ><div>收款人：<span id='skr'>马老板</span></div>
      <button class="btn1" data-clipboard-action="copy" >复制</button> 
      </div>

    <div class="xx"><div>银行账号：<span id='yhzh'>123488328423329</span></div>
    <button class='btn2' data-clipboard-action="copy">复制</button>
     </div> 
</div>         

界面效果：点击复制，实现各行信息的复制

**

JS：首先要先下载包clipboard.min.js，并引入：

**
下载地址：
链接：https://pan.baidu.com/s/1b3b61111-ytOrUvlfxTt6A
提取码：fko3

<script src="__PUBLIC__/statics/js/clipboard.min.js"></script> 
<script>
    var clipboard = new ClipboardJS('.btn', { //点击的对象
        target: function() { //选择要复制的目标
            return document.querySelector('#khh');
        }
    });
    clipboard.on('success', function(e) {
       sp_tip('已复制');
    });
    clipboard.on('error', function(e) {
       sp_tip('复制失败');
    });

    var clipboard1 = new ClipboardJS('.btn1', {
        target: function() {
            return document.querySelector('#skr');
        }
    });
    clipboard1.on('success', function(e) {
        sp_tip('已复制');
    });
    clipboard1.on('error', function(e) {
        sp_tip('复制失败');
    });
    

    var clipboard1 = new ClipboardJS('.btn2', {
        target: function() {
            return document.querySelector('#yhzh');
        }
    });
    clipboard1.on('success', function(e) {
        sp_tip('已复制');
    });
    clipboard1.on('error', function(e) {
        sp_tip('复制失败');
    });
</script>