一鍵複製到剪切板功能(支持web和微信)

前言：最近在作微信返利服務號，直接返回淘口令文本消息怕被封。因而打算改爲圖文消息的形式，那麼問題就來了，怎麼讓用戶更簡單的進行淘口令複製呢？

Clipboard.js

使用方法,幾行代碼搞定

data-clipboard-target 指定要複製的標籤 data-clipboard-action 指定事件copy 或 cut

<p id="tkl" th:text="'長按複製本條信息（'+${tkl}+'）打開手淘下單便可!'" style="text-align: center; "></p>
<button id="btn" data-clipboard-target="#tkl" data-clipboard-action="copy"
        class="btn btn-success" style="text-align: center;width: 100%">
    一鍵複製
</button>

$(document).ready(function () {
   let clipboard = new ClipboardJS('.btn');
   clipboard.on('success', function (e) {
       console.log(e);
       document.getElementById('btn').innerHTML = '複製成功';
   });
});
複製代碼

遇到的問題

一開始從網上看到的教程結果出現這個問題。ReferenceError: Clipboard is not defined

緣由：一開始的寫法let clipboard = new Clipboard('.btn');

最後推薦一下個人公衆號，淘寶購物返現用