方法 1：使用?document.execCommand('copy')?在用戶觸發的事件中

這種方法適用于用戶觸發的事件（如點擊按鈕），因為這是?execCommand('copy')?的唯一允許場景。

<template><button @click="copyToClipboard">復制到剪貼板</button>
</template><script>
export default {methods: {copyToClipboard() {const text = '要復制的內容'; // 你想復制的文本const el = document.createElement('textarea');el.value = text;el.setAttribute('readonly', '');el.style.position = 'absolute';el.style.left = '-9999px';document.body.appendChild(el);el.select();document.execCommand('copy');document.body.removeChild(el);alert('已復制到剪貼板'); // 提示復制成功}}
}
</script>

方法 2：使用 Clipboard API（推薦方式）

從 Chrome 66 開始，Clipboard API?提供了一個更現代、更安全和更標準的方法來復制內容到剪貼板。這種方法可以在任何上下文中使用，而不需要用戶交互。

<template><button @click="copyToClipboard">復制到剪貼板</button>
</template><script>
export default {methods: {async copyToClipboard() {const text = '要復制的內容'; // 你想復制的文本try {await navigator.clipboard.writeText(text);alert('已復制到剪貼板'); // 提示復制成功} catch (err) {console.error('復制失敗', err);}}}
}
</script>

方法 3：使用第三方庫（如 clipboard.js）

如果想要一個更簡單、兼容性更好的解決方案，可以考慮使用第三方庫如?clipboard.js。這個庫封裝了瀏覽器的各種剪貼板操作，并提供了一個簡單易用的 API。

首先，你需要安裝?clipboard.js：

npm install clipboard --save

然后，在你的 Vue 組件中使用它：

<template><button class="btn" data-clipboard-text="要復制的內容">復制到剪貼板</button>
</template><script>
import Clipboard from 'clipboard'; // 引入 clipboard.js
export default {mounted() {new Clipboard('.btn'); // 初始化 Clipboard.js，傳入選擇器字符串或者DOM元素列表等參數。這里使用了類選擇器作為示例。}
}
</script>

隨手記錄一下~