告别 Flash 和臃肿框架！这个 3 万 Star 的开源工具帮你提高效率

clipboard.js 是一个轻量级、无依赖的剪贴板操作工具，gzip 压缩后仅 3kb，可替代 Flash 和臃肿框架实现高效剪贴板功能。以下是详细使用指南：

• 轻量高效：无冗余代码，加载速度快。
• 无依赖：不依赖 Flash 或其他框架。
• 事件代理：通过单个监听器处理多个元素，优化内存使用。

1. npm 安装：npm install clipboard --save
2. CDN 引入：<script src="
   https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

• 初始化：通过选择器、元素或数组创建实例。new ClipboardJS('.btn'); // 绑定到所有.btn元素

• HTML：<input id="foo" value="待复制文本"><button class="btn" data-clipboard-target="#foo">复制</button>

• HTML（仅限 <input>/<textarea>）：<textarea id="bar">待剪切文本</textarea><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">剪切</button>

• HTML：<button class="btn" data-clipboard-text="直接复制这段文本">复制</button>

• 成功/失败回调：const clipboard = new ClipboardJS('.btn');clipboard.on('success', (e) => { console.log('复制成功:', e.text); e.clearSelection(); // 清除选中状态});clipboard.on('error', (e) => { console.error('复制失败:', e.trigger);});

• 通过函数返回文本：new ClipboardJS('.btn', { text: (trigger) => trigger.getAttribute('data-custom-attr')});

• 解决焦点问题：new ClipboardJS('.btn', { container: document.getElementById('modal')});

• 释放资源：clipboard.destroy(); // 适用于单页应用

1. 安装与引入：

   yarn add clipboardimport ClipboardJS from 'clipboard';

2. 组件中使用：

   <template> <input id="foo" v-model="content"> <button class="btn" data-clipboard-target="#foo">复制</button></template><script>import { ref, onMounted, onBeforeUnmount } from 'vue';export default { setup() { const content = ref('初始文本'); let clipboard; onMounted(() => { clipboard = new ClipboardJS('.btn'); clipboard.on('success', () => alert('复制成功！')); }); onBeforeUnmount(() => clipboard.destroy()); return { content }; }};</script>

• 支持主流浏览器：Chrome、Firefox、Edge、Safari（部分版本需前缀）。
• IE 兼容：需引入 document.execCommand 的 polyfill（如 IE9+）。

• 移动端限制：部分浏览器可能限制自动剪切操作。
• 安全性：确保复制内容来自可信源，避免 XSS 风险。

通过以上方法，clipboard.js 可无缝集成到各类项目中，提供简洁高效的剪贴板操作。