必须在用户点击事件中同步调用 navigator.clipboard.writetext()（https/localhost 环境），否则降级至动态创建隐藏 textarea 并执行 document.execcommand('copy')；需 trim 文本、正确设置样式与选区、提供按钮状态反馈及无障碍支持。
直接用 navigator.clipboard.writeText()，但必须在用户点击时同步调用，且页面得是 HTTPS 或 localhost；否则 fallback 到 document.execCommand('copy') 配合临时 textarea。
点击事件里调用 navigator.clipboard.writeText() 才有效
这个 API 不是“写了就能用”，它被浏览器严格限制：只有在用户真实点击、按键等手势触发的上下文中才允许执行。放在 setTimeout、fetch.then() 或页面加载完成时自动调用，一律报 NotAllowedError: Write permission denied。
- 按钮必须绑定
click事件监听器，函数声明为async - 复制前对文本做
.trim()，避免空格或换行被意外复制进去 - 不能用
innerText读取含格式的内容（比如会把textContent - Safari 13.1+ 才完整支持，iOS 13.4+ 是移动端底线，旧版 Safari 必须降级
降级到 document.execCommand('copy') 的实操要点
IE11、Safari 12 及更早、部分安卓 WebView 不认 navigator.clipboard，这时得靠已废弃但尚能用的 execCommand。它不操作字符串，而是操作 DOM 元素里的选中内容。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 动态创建
textarea，设value = text，再select()，最后execCommand('copy') -
textarea必须插入document.body，仅设置display: none或visibility: hidden会导致 iOS 和某些安卓浏览器静默失败 - 推荐样式：
position: absolute; left: -9999px;，既隐藏又可聚焦可选中 - 移动端 Safari 要补
textarea.setSelectionRange(0, 999999)，否则可能只复制开头几个字符
按钮状态与用户反馈不能省
复制动作无声无息，用户点完没反应就会连点、刷新、怀疑功能坏了。视觉反馈不是锦上添花，是防止误操作的底线。
- 点击后立即改按钮文字为
"已复制"，2 秒后自动切回原文字（别用alert()，打断流程） - 失败时不要只写
console.error，至少更新一个<span id="status"></span>并加aria-live="polite"供屏幕阅读器感知 - 按钮点击后建议临时
disabled = true，防止连点触发多次 Promise，哪怕只是瞬间 - 别假设用户知道“复制成功”意味着什么——文案要明确，比如“链接已复制”，而不是“已复制”
navigator.clipboard 权限不是一次授权永久有效
Chrome 95+ 开始，即使用户上次点过“允许”，刷新页面后依然要重新走用户手势触发流程。这不是 bug，是安全策略强制要求每次写入都需显式用户意图。
所以别在组件初始化时查 navigator.permissions.query({name:'clipboard-write'})，也别缓存“已授权”状态。所有逻辑必须包裹在 click handler 内部，且每次点击都走完整 try/catch + 降级链。真正的兼容性难点不在 API 是否存在，而在于你是否始终尊重那个“用户此刻正在主动操作”的上下文边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
