資訊專欄INFORMATION COLUMN
摘要：需求開發過程中遇到的需求需要復制請求過來的一段密令類似支付寶淘寶口令到剪切板。網上搜了下，是個相對比較靠譜的第三方。感謝大佬的評論意見使用該方法，會在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。
需求
開發過程中遇到的需求需要復制 請求過來的一段密令（類似支付寶淘寶口令）到剪切板。
pc端的文本復制到剪切板如果是在pc端的話，可以直接使用原生js進行編寫，代碼如下：
但是這種方法在移動端會有一些問題，我是在微信公眾號開發，發現在微信瀏覽器中會失效。
網上搜了下，clipboard.js是個相對比較靠譜的第三方。
clipboard.js官方github
目前的star 25k ??
大佬的中文翻譯
概括一下兩種方式，一種適合復制固定的文本，另一種適合復制從后端獲取的數據文本;
具體操作 安裝通過npm安裝
npm install clipboard --save
通過script+鏈接導入,可以去BootCDN復制個自己想要的
使用如果是vue文件，只需要在相關的組件中進行clipboard.js導入即刻。
import Clipboard from "clipboard";
編寫需要進行復制的相關代碼
如果是復制固定文本則如下：
如果是復制從服務器獲取的數據則如下：
//這個input可以進行相應的隱藏，例如絕對定位等
....
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，暫時還未發現有兼容問題的存在，如果遇到了我再來及時更新
最后感謝各位大佬的參閱，如果有什么問題都可以在評論區提出。
如果覺得對您有幫助的話，也可點個贊，點個收藏，點關注不迷路。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102294.html
摘要：需求開發過程中遇到的需求需要復制請求過來的一段密令類似支付寶淘寶口令到剪切板。網上搜了下，是個相對比較靠譜的第三方。感謝大佬的評論意見使用該方法，會在下次更新循環結束之后執行延遲回調。在修改數據之后立即使用這個方法，獲取更新后的。 需求 開發過程中遇到的需求需要復制 請求過來的一段密令（類似支付寶淘寶口令）到剪切板。 pc端的文本復制到剪切板 如果是在pc端的話，可以直接使用原生js進...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
閱讀 2591·2021-09-26 10:17
閱讀 3220·2021-09-22 15:16
閱讀 2130·2021-09-03 10:43
閱讀 3257·2019-08-30 11:23
閱讀 3657·2019-08-29 13:23
閱讀 1301·2019-08-29 11:31
閱讀 3686·2019-08-26 13:52
閱讀 1394·2019-08-26 12:22
