推荐使用原生 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）：
<template><button @click="copyText">复制链接</button>
</template>
<script setup>
const textToCopy = 'https://example.com/share?id=123'
const copyText = async () => {
try {
await navigator.clipboard.writeText(textToCopy)
console.log('复制成功')
} catch (err) {
console.error('复制失败:', err)
}
}
</script>
增强体验：添加复制状态反馈
用户点击后应有明确反馈，比如按钮文字临时变为“已复制”，2 秒后恢复：
立即学习“前端免费学习笔记（深入）”；
- 用一个响应式变量（如
copied）控制按钮显示状态 - 复制成功后设为
true，用setTimeout自动重置 - 同时禁用按钮短暂时间，避免连续点击
示例片段：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
const copyText = async () => {
try {
await navigator.clipboard.writeText(textToCopy)
copied.value = true
setTimeout(() => { copied.value = false }, 2000)
} catch (err) {
console.error('复制失败:', err)
}
}
兼容性兜底（仅必要时）
若需支持旧版 Safari（document.execCommand('copy')，但该方法已废弃，且要求元素必须可聚焦、选中：
- 创建一个隐藏的
<textarea>，设值并选中 - 调用
document.execCommand('copy') - 清理 DOM，避免污染
- 仅作为 fallback，优先走
navigator.clipboard
不建议默认启用；现代项目可直接忽略此方案，除非明确需兼容 iOS 12 或更早系统。
注意事项与常见问题
必须在用户交互中调用：不能在异步回调（如 setTimeout、API 响应后）中直接调用 clipboard API，否则会报 “Permission denied”。解决办法是把复制逻辑放在 click、input 等事件处理器内。
HTTPS 要求：navigator.clipboard 在非安全上下文（HTTP）中不可用，本地开发（localhost）除外。
移动端适配：iOS Safari 对 writeText 支持良好，但需确保页面未被 iframe 沙箱限制（sandbox 属性不含 allow-scripts 会禁用剪贴板）。
