一、原生方法

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('复制失败'); });