clipboard.js移動端無法實現複製

clipboard.js簡介：實現了純 JavaScript (無 Flash)的瀏覽器內容複製到系統剪貼板的功能。

在項目中使用clipboard.js插件去實現點擊按鈕，複製文字到剪切板的功能。同樣的代碼，在PC可以實現正常複製但是在移動端卻失效

主要是因爲移動端項目爲了防止用戶長按文本實現複製，一般在重置reset.css裏面都會設置

div, p, a, ul, li, ol, h1, h2, h3, h4, h5, h6, span {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

所以爲了使需要被複制的文本所在的div能夠選中，可以設置css屬性user-select:auto，不過，這樣做的缺點是，用戶長按該區域也能實現複製。

還有一種解決方式就是通過js去獲取需要複製的內容在，這種寫法也是官方文檔提供的，爲了使我們可以動態的設置用戶剪貼板的內容 https://clipboardjs.com/

this.clip = new ClipboardJS('.copy-btn', {
    text: () => myInvitedCode ? myInvitedCode : ''  //設置text的值，即爲需要複製到用戶剪貼板的內容
});

對應的HTML：

<div className="invite-code">
    {
        myInvitedCode ? myInvitedCode : ''
    }
</div>
<button className="copy-btn" data-clipboard-target=".invite-code">{UPEX.lang.template('複製')}</button>

還有需要注意的是，用戶點擊的部分需要用button標籤，我一開始用的div，瀏覽器調試的時候可以點擊，但是在手機上調試時不能實現複製