在前端開發中，復制文本到剪貼板的功能通常使用瀏覽器的 Clipboard API 實現。比如?navigator.clipboard.writeText?方法。以下是一個簡單的案例，展示如何使用 Clipboard API 實現復制文本的功能。
基本用法
首先，你需要創建一個按鈕，當用戶點擊該按鈕時，將指定的文本通過navigator.clipboard.writeText復制到剪貼板。
<template><div><h1>案例</h1><p ref="textToCopy">要復制的內容</p><button @click="copyText">Copy Text</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const textToCopy = ref(null);const copyText = async () => {const text = textToCopy.value.textContent;try {await navigator.clipboard.writeText(text);console.log("復制成功");// $message彈出復制成功的提示} catch (err) {console.error("復制失敗：", err);// $message彈出復制失敗的提示}};return {textToCopy,copyText};}
}
</script><style scoped>
button {padding: 10px 15px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;
}
button:hover {background-color: #45a049;
}
</style>代碼說明
navigator.clipboard.writeText：這是現代瀏覽器提供的異步 API，用于將文本寫入剪貼板。它是異步的，因此需要使用?async/await。
用戶提示：如果用戶的瀏覽器不支持?Clipboard API?或復制失敗，會拋出錯誤，因此需要用?try...catch?捕獲異常。使用?Element Plus?的?$message?提示用戶復制成功或失敗。
兼容性解決方案
（1）如果需要兼容不支持?Clipboard API?的瀏覽器，可以使用以下代碼：
<script>
import { getCurrentInstance } from 'vue';export default {setup() {const instance = getCurrentInstance();const copyToClipboardFallback = (text) => {const textarea = document.createElement('textarea');textarea.value = text;document.body.appendChild(textarea);textarea.select();try {document.execCommand('copy');instance.proxy.$message.success("復制成功！");} catch (err) {instance.proxy.$message.error("復制失敗，請手動復制！");}document.body.removeChild(textarea);};return {copyToClipboardFallback};}
}
</script>copyToClipboardFallback?函數：
該函數接受一個?text?參數，表示要復制的文本。
創建一個?<textarea>?元素，并將其值設置為傳入的文本。
將?<textarea>?元素添加到文檔的?<body>?中，并選中其中的文本。
使用?document.execCommand('copy')?嘗試復制選中的文本。
使用?try...catch?塊來處理可能的錯誤，并通過?instance.proxy.$message?顯示成功或失敗的消息。
最后，從文檔中移除?<textarea>?元素。
（2）在copyText方法中，可以添加對?navigator.clipboard?的檢查，以決定使用哪種方式：
if (navigator.clipboard && window.isSecureContext) {navigator.clipboard.writeText(text).then(() => {console.log("復制成功！");}).catch(err => {console.error("復制失敗：", err);});} else {copyToClipboardFallback(text);}注意事項
瀏覽器支持：Clipboard API 在現代瀏覽器中得到了廣泛支持，但在某些舊版瀏覽器中可能不可用。在使用前，建議檢查瀏覽器的兼容性。
權限：某些瀏覽器可能會要求用戶授予剪貼板訪問權限。
異步操作：navigator.clipboard.writeText?是一個異步函數，因此需要使用?async/await?或?.then()?來處理。
??若文章對你有幫助，點贊、收藏加關注吧！
)
