實作點選按鈕 複制文本内容

一、原生方法

1、結構

<li><span>運單号碼：</span><b id="waybill_number">{$order->address}</b><p style="display:inline-block;color: red;" onclick="copy()">複制</p></li>
           

2、js

function copy(){
        copytxt($('#waybill_number')[0]); //擷取複制文本的内容
        layer.msg('複制成功');
    }
        
   function copytxt(element) {
        window.getSelection().removeAllRanges(); 
        var selection = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(element);
        window.getSelection().addRange(range); 
        selection.removeAllRanges();
        selection.addRange(range);
        
        document.execCommand('copy');  
     } 
           

二、引用插件方法

1、插件位址

https://clipboardjs.com/

根據網頁，該安裝的安裝 ，該引入的引入，此處不述說。

使用：

（1）結構

<li><span>運單号碼：</span>
   {if !empty($order->waybill_number)}
      <b id="waybill_number" data-clipboard-text=" {$order->waybill_number}" >{$order->waybill_number}<p class="ml10" style="display:inline-block;color: #fff;background: red;" id="payment_copy">複制</p></b>
   {/if}
</li>
           

注：這個是php smarty 渲染的結構， {$order->waybill_number}表示一個變量。

要給結構複制的值加上data-clipboard-text屬性，寫法：data-clipboard-text=“複制的變量”

（2）js

先引入插件

結構加載完成運作以下代碼，vue的話，寫在mounted生命周期中

// ====複制粘貼====
    var clipboard = new Clipboard('#waybill_number'); 
    clipboard.on('success', function(e) { 
        layer.msg('複制成功');  //小彈窗 ，複制成功，這裡用的是layer ui架構的
    });
    clipboard.on('error', function(e) {
        layer.msg('複制失敗');
    });