推荐使用 navigator.clipboard.writetext 实现复制，需 https 安全上下文并配合 promise 处理；降级时用动态 textarea + execcommand；避免已废弃或冗余方案。
直接用原生 API 就能实现，不需要额外插件，关键是选对方法、注意安全上下文限制。
优先用 navigator.clipboard.writeText（推荐）
这是现代标准方案，简洁可靠，但有前提条件：
- 必须运行在安全上下文中：HTTPS 协议、
localhost或127.0.0.1；HTTP 站点会直接报错 - 需配合 Promise 处理成功/失败，不能忽略 catch
- Vue2 和 Vue3 都可直接调用，无需额外依赖
示例（Vue3 setup 语法）：
const copyText = async (text) => {
try {
await navigator.clipboard.writeText(text)
console.log('复制成功')
} catch (err) {
console.error('复制失败:', err)
}
}
模板中绑定：<button>复制</button>
降级用 document.execCommand（兼容老浏览器）
当 navigator.clipboard 不可用时（比如 HTTP 环境或旧版 Safari），回退到传统方式：
- 动态创建
<textarea></textarea>，设值、选中、执行copy - 记得把 textarea 插入 body 再移除，避免页面残留
- iOS Safari 需加
readOnly和绝对定位隐藏，防止唤起键盘
核心逻辑片段：
const fallbackCopy = (text) => {
const el = document.createElement('textarea')
el.value = text
el.readOnly = true
el.style.position = 'absolute'
el.style.left = '-9999px'
document.body.appendChild(el)
el.select()
document.execCommand('copy')
document.body.removeChild(el)
}
Vue2 选项式写法整合示例
把两种方式封装成一个健壮方法：
methods: {
copyToClipboard(text) {
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(text)
.then(() => this.$message.success('复制成功'))
.catch(() => this.fallbackCopy(text))
} else {
this.fallbackCopy(text)
}
},
fallbackCopy(text) {
// 上面的 textarea 实现
}
}
不建议用的方案
这些方式现在基本可以绕开：
-
vue-clipboard2：已停止维护，Vue3 不兼容，API 设计过时 -
document.execCommand：已被标记为废弃，Chrome 95+ 已限制部分行为 - 第三方库如 clipboard.js：功能冗余，纯文本复制没必要引入整包
安全、轻量、可维护，就用 navigator.clipboard + 降级逻辑，两行判断搞掂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
