Clipboard.js 的 new ClipboardJS() 不支持直接传文本复制，必须绑定 DOM 元素；最简方案是用 data-clipboard-text 属性配合按钮和 new ClipboardJS('.btn')；如需动态复制，推荐原生 navigator.clipboard.writeText()，但须在用户事件同步上下文中调用。
Clipboard.js 的 new ClipboardJS() 构造函数不支持“一行代码”直接复制文本
想用 Clipboard.js 实现“点击就复制”，必须绑定 DOM 元素（如 <button> 或 <input>），它本身没有提供类似 ClipboardJS.copy('text') 这样的静态方法。所谓“一行代码”复制，其实是误解——底层仍需元素触发、事件监听和配置项支撑。
最简可行方案：用 data-clipboard-text 属性 + 按钮元素
这是真正接近“写一行逻辑”的做法，HTML 侧声明要复制的内容，JS 侧只需初始化一次实例：
<button class="btn" data-clipboard-text="Hello, world!">复制</button>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>new ClipboardJS('.btn');</script>
关键点：
-
data-clipboard-text必须写在触发元素（如<button>）上，不能写在<div>或其他非交互元素上 - 选择器
'.btn'要能准确匹配到该按钮；若页面有多个，会全部生效 - 脚本必须在 DOM 加载完成后执行，否则找不到元素（可放
</body>前，或用DOMContentLoaded包裹）
如果真要“动态传入文本”，得自己封装一个函数
Clipboard.js 不暴露底层 writeText API 封装，但你可以绕过它，直接用原生 navigator.clipboard.writeText() —— 现代浏览器基本都支持（Chrome 66+、Firefox 63+、Safari 13.1+）：
立即学习“前端免费学习笔记（深入）”；
function copyText(text) {
navigator.clipboard.writeText(text).catch(err => console.error('复制失败:', err));
}
copyText('Hello, world!');
注意：
- 这个调用必须发生在用户手势（如 click、tap）触发的上下文中，否则会被浏览器拒绝（
SecurityError） - 不能在
setTimeout或异步回调里直接调，除非它是由用户事件同步触发的 - 不需要引入 Clipboard.js 库，更轻量，也更可控
常见报错：Failed to execute 'writeText' on 'Clipboard': Document is not focused
这通常不是焦点问题，而是因为调用时机违规。典型错误写法：
document.querySelector('#btn').addEventListener('click', () => {
setTimeout(() => navigator.clipboard.writeText('text'), 0); // ❌ 异步脱离事件上下文
});
正确做法是把 writeText 放在事件处理函数的同步路径中：
document.querySelector('#btn').addEventListener('click', () => {
navigator.clipboard.writeText('text'); // ✅ 同步执行
});
或者用 async/await 显式等待（仍需在事件内）：
document.querySelector('#btn').addEventListener('click', async () => {
try {
await navigator.clipboard.writeText('text');
} catch (err) {
console.error(err);
}
});
实际项目中，别硬套 Clipboard.js 的“一行幻想”。现代浏览器下，原生 API 更直接；若需兼容 IE 或旧版 Safari（ 
