国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

在vue移動(dòng)端項(xiàng)目中，配合clipboard.js插件，復(fù)制一段密令（類似淘寶支付寶口令）的文本到剪

brianway / 3520人閱讀

摘要：需求開發(fā)過程中遇到的需求需要復(fù)制請(qǐng)求過來的一段密令類似支付寶淘寶口令到剪切板。網(wǎng)上搜了下，是個(gè)相對(duì)比較靠譜的第三方。感謝大佬的評(píng)論意見使用該方法，會(huì)在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的。

需求

開發(fā)過程中遇到的需求需要復(fù)制 請(qǐng)求過來的一段密令（類似支付寶淘寶口令）到剪切板。

pc端的文本復(fù)制到剪切板

如果是在pc端的話，可以直接使用原生js進(jìn)行編寫，代碼如下：

但是這種方法在移動(dòng)端會(huì)有一些問題，我是在微信公眾號(hào)開發(fā)，發(fā)現(xiàn)在微信瀏覽器中會(huì)失效。

網(wǎng)上搜了下，clipboard.js是個(gè)相對(duì)比較靠譜的第三方。

clipboard.js

官方github

目前的star 25k ??

大佬的中文翻譯

概括一下

兩種方式，一種適合復(fù)制固定的文本，另一種適合復(fù)制從后端獲取的數(shù)據(jù)文本;

具體操作 安裝

通過npm安裝

npm install clipboard --save

通過script+鏈接導(dǎo)入,可以去BootCDN復(fù)制個(gè)自己想要的

使用

如果是vue文件，只需要在相關(guān)的組件中進(jìn)行clipboard.js導(dǎo)入即刻。

import Clipboard from "clipboard";

編寫需要進(jìn)行復(fù)制的相關(guān)代碼

如果是復(fù)制固定文本則如下：

如果是復(fù)制從服務(wù)器獲取的數(shù)據(jù)則如下：

               //這個(gè)input可以進(jìn)行相應(yīng)的隱藏，例如絕對(duì)定位等    


....

methods: {
    handleCopy(){
        axios.post("請(qǐng)求鏈接").then(res=>{
            var input = document.getElementById("copy-input");
            input.value = res.data      //將獲取的數(shù)據(jù)復(fù)制給input
            setTimeout(() => {
                  const copybtn = this.$refs.copy;
                  this.clipboard = new Clipboard(copybtn);
            }, 100);                      //利用延時(shí)器防止內(nèi)容沒有及時(shí)更新等導(dǎo)致報(bào)錯(cuò)
        })
    }
}

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

使用該方法，會(huì)在下次 DOM 更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的 DOM。代碼如下：

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

也可以做一些復(fù)制成功與否的判斷：

clipboard.on("success", function(e) {
    console.info("Action:", e.action);
    console.info("Text:", e.text);
    console.info("Trigger:", e.trigger);
    alert("復(fù)制成功，您復(fù)制的鏈接為"+e.text);
    e.clearSelection();
});

clipboard.on("error", function(e) {
    console.error("Action:", e.action);
    console.error("Trigger:", e.trigger);
    alert("復(fù)制失敗")
});

這位大佬的demo代碼也可以進(jìn)行參考，親測(cè)有用 -> 使用clipboard.js實(shí)現(xiàn)js復(fù)制黏貼的功能

可能存在的兼容性問題

網(wǎng)上說這個(gè)插件可能存在一些兼容性問題，我自己測(cè)試了多個(gè)手機(jī)，包括安卓和ios，暫時(shí)還未發(fā)現(xiàn)有兼容問題的存在，如果遇到了我再來及時(shí)更新

最后

感謝各位大佬的參閱，如果有什么問題都可以在評(píng)論區(qū)提出。

如果覺得對(duì)您有幫助的話，也可點(diǎn)個(gè)贊，點(diǎn)個(gè)收藏，點(diǎn)關(guān)注不迷路。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/102294.html

相關(guān)文章

  • 在vue移動(dòng)端項(xiàng)目中，配合clipboard.js插件，復(fù)制一段密令（類似淘寶支付寶口令）的文本到剪

    摘要：需求開發(fā)過程中遇到的需求需要復(fù)制請(qǐng)求過來的一段密令類似支付寶淘寶口令到剪切板。網(wǎng)上搜了下，是個(gè)相對(duì)比較靠譜的第三方。感謝大佬的評(píng)論意見使用該方法，會(huì)在下次更新循環(huán)結(jié)束之后執(zhí)行延遲回調(diào)。在修改數(shù)據(jù)之后立即使用這個(gè)方法，獲取更新后的。 需求 開發(fā)過程中遇到的需求需要復(fù)制 請(qǐng)求過來的一段密令（類似支付寶淘寶口令）到剪切板。 pc端的文本復(fù)制到剪切板 如果是在pc端的話，可以直接使用原生js進(jìn)...

    Lyux 評(píng)論0 收藏0

  • 前端資源系列（4）-前端學(xué)習(xí)資源分享&前端面試資源匯總

    摘要：特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 特意對(duì)前端學(xué)習(xí)資源做一個(gè)匯總，方便自己學(xué)習(xí)查閱參考，和好友們共同進(jìn)步。 本以為自己收藏的站點(diǎn)多，可以很快搞定，沒想到一入?yún)R總深似海。還有很多不足&遺漏的地方，歡迎補(bǔ)充。有錯(cuò)誤的地方，還請(qǐng)斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應(yīng)和斧正，會(huì)及時(shí)更新，平時(shí)業(yè)務(wù)工作時(shí)也會(huì)不定期更...

    princekin 評(píng)論0 收藏0

  • H5剪切板功能

    摘要：復(fù)制內(nèi)容到剪貼板插件官網(wǎng)地址引用方式默認(rèn)是截取中的的屬性值截取輸入框中的值里面還有很多高級(jí)用法可以前往官網(wǎng)邏輯更多細(xì)節(jié)官網(wǎng)框架提供的剪切板插件 ???? 最近使用Vue開發(fā)Line(日韓的一款類似中國(guó)微信平臺(tái))的內(nèi)嵌H5.里面的有一個(gè)需求就是將當(dāng)前鏈接粘貼，然后發(fā)送到pc端，在電腦上進(jìn)行打開。所有搜集找到了一下幾種情況： 1.不帶input輸入框的原生js方法 這種情況適用于復(fù)制非...

    Developer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<