推荐使用原生 navigator.clipboard.writetext() api，它简洁安全、无需第三方库，兼容chrome 66+、firefox 63+、edge 79+、safari 13.1+；需在用户手势中调用，配合try/catch处理异常，并可添加复制状态反馈提升体验。
Vue 中实现一键复制文本到剪贴板，推荐使用原生 navigator.clipboard.writeText() API，它简洁、安全、无需第三方库，且兼容主流现代浏览器（Chrome 66+、Firefox 63+、Edge 79+、Safari 13.1+）。
基础用法：绑定按钮点击触发复制
在 Vue 组件中，直接调用 Clipboard API 即可。注意需在用户手势（如 click）中调用，否则会被浏览器拒绝：
- 定义要复制的文本（可以是 data 属性、计算属性或 prop）
- 在方法中调用
navigator.clipboard.writeText(text) - 用
try/catch捕获权限拒绝或写入失败（如页面非安全上下文、用户禁用剪贴板权限）
示例（Vue 3 Composition API）：
<script setup><br> const textToCopy = 'https://example.com/share?id=123'<br> <br> const copyText = async () => {<br> try {<br> await navigator.clipboard.writeText(textToCopy)<br> console.log('复制成功')<br> } catch (err) {<br> console.error('复制失败:', err)<br> }<br> }<br> </script>
增强体验：添加复制状态反馈
用户点击后应有明确反馈，比如按钮文字临时变为“已复制”，2 秒后恢复：
- 用一个响应式变量（如
copied）控制按钮显示状态 - 复制成功后设为
true，用setTimeout自动重置 - 同时禁用按钮短暂时间，避免连续点击
示例片段：
