前言
Android 系統沒有什么特別的要求,實現這個也比較容易。但ios在某些情況下就會出現問題。
- 如果ios是點擊之后,請求接口,再把接口的內容賦值給粘貼板肯定行不通,會被ios系統攔截,導致賦值失敗或者賦值為空。
- 建議使用第三方庫clipboard.js來實現粘貼板賦值
- 將點擊的dom設置為一個button最好實現。
<!-- 輔助copy的button Android不需要被用戶查看 -->
<button id="copy-share" ref="copyBtn" v-show="showBtn">Copy to clipboard
</button>import ClipboardJS from 'clipboard';const copyBtn = ref('')
const showBtn = ref(false)
const handleShareLink = async () => {// 這是一個異步函數const res = await shareLinkGenerate({...})if(res) {copyBtn.value.setAttribute('data-clipboard-text', res); // 并且將這個res的結果,賦值給這個按鈕var clipboard = new ClipboardJS('#copy-share'); // 如果請求成功了 讓clipboard 和按鈕綁定clipboard.on('success', function(e) { // 成功的回調showSuccessToast('分享鏈接已復制');e.clearSelection();});clipboard.on('error', function(e) { // 和失敗的回調showToast('復制失敗');e.clearSelection();});//判斷是不是ios系統或者蘋果系列if (navigator?.userAgent?.match(/(iPhone|iPod|iPad);?/i)) {// 控制讓一個按鈕出現,或者彈一個按鈕出來,讓用戶再點擊這個按鈕一次showBtn.value = truereturn} else {// 如果不是蘋果,就可以直接賦值給剪貼板了copyBtn 就是對應的按鈕const handleCopy = () => {if(copyBtn.value) {copyBtn.value.click()}}setTimeout(() => {handleCopy()},1000) }}
}