在vue移動端項目中，配合clipboard.js插件，複製一段密令（相似淘寶支付寶口令）的文本到剪切板

需求

開發過程當中遇到的需求須要複製 請求過來的一段密令（相似支付寶淘寶口令）到剪切板。

pc端的文本複製到剪切板

若是是在pc端的話，能夠直接使用原生js進行編寫，代碼以下：

<textarea id="input">這是被複制的內容</textarea>
<button onclick="copyText()">copy</button>


<script type="text/javascript">
    function copyText() {
        var text = document.getElementById("text").innerText;
        var input = document.getElementById("input");
        input.value = text; // 修改文本框的內容
        input.select(); // 選中文本
        document.execCommand("copy"); // 執行瀏覽器複製命令
        alert("複製成功");
    }
</script>

可是這種方法在移動端會有一些問題，我是在微信公衆號開發，發如今微信瀏覽器中會失效。

網上搜了下，clipboard.js是個相對比較靠譜的第三方。

clipboard.js

官方github

目前的star 25k ⭐️

大佬的中文翻譯

歸納一下

兩種方式，一種適合複製固定的文本，另外一種適合複製從後端獲取的數據文本;

具體操做

安裝

經過npm安裝

npm install clipboard --save

經過script+連接導入,能夠去BootCDN複製個本身想要的

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.js"></script>

使用

若是是vue文件，只須要在相關的組件中進行clipboard.js導入即刻。

import Clipboard from "clipboard";

編寫須要進行復制的相關代碼

若是是複製固定文本則以下：

<button
    class="copy-btn"
    @click="getAnswerNiceName"
    ref="copy"
    data-clipboard-text="這是固定的須要被複制到剪切板的內容"
>複製口令</button>

若是是複製從服務器獲取的數據則以下：

<input
    id="copy-input"
    readonly       //若是在移動端，必定要再input中加上`readonly`屬性，不然會拉起手機輸入框
/>               //這個input能夠進行相應的隱藏，例如絕對定位等    
<button
    class="copy-btn"
    @click="handleCopy"
    ref="copy"
    data-clipboard-action="copy"
    data-clipboard-target="#copy-input"
>複製口令</button>

....

methods: {
    handleCopy(){
        axios.post('請求連接').then(res=>{
            var input = document.getElementById("copy-input");
            input.value = res.data      //將獲取的數據複製給input
            setTimeout(() => {
                  const copybtn = this.$refs.copy;
                  this.clipboard = new Clipboard(copybtn);
            }, 100);                      //利用延時器防止內容沒有及時更新等致使報錯
        })
    }
}

延時器代碼部分，也可使用vue提供的 nextTick 方法。 //感謝 Grewer 大佬的評論意見

使用該方法，會在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。代碼以下：

this.$nextTick(() => {
    const copybtn = this.$refs.copy;
    this.clipboard = new Clipboard(copybtn);
});

也能夠作一些複製成功與否的判斷：

clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);
    alert('複製成功，您複製的連接爲'+e.text);
    e.clearSelection();
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
    alert('複製失敗')
});

這位大佬的demo代碼也能夠進行參考，親測有用 -> 使用clipboard.js實現js複製黏貼的功能

可能存在的兼容性問題

網上說這個插件可能存在一些兼容性問題，我本身測試了多個手機，包括安卓和ios，暫時還未發現有兼容問題的存在，若是遇到了我再來及時更新

最後

感謝各位大佬的參閱，若是有什麼問題均可以在評論區提出。

若是以爲對您有幫助的話，也可點個贊，點個收藏，點關注不迷路。