共计 3405 个字符，预计需要花费 9 分钟才能阅读完成。
clipboard.js 用于剪贴板复制，gzip 压缩版仅有 3kb。
为什么抉择 clipboard.js
将文本复制到剪贴板不应该搞得简单，它不应该须要几十个步骤来配置或数百 KB 来加载，更不应该依赖于 Flash 或其余臃肿的框架。
clipboard.js 解脱了这些限度，就能够实现便捷轻量的操作剪贴板。
装置
npm 装置:
npm install clipboard --save或者下载压缩包文件：https://github.com/zenorocha/…
配置
如果曾经通过 npm 装置，则间接 import：
import ClipboardJS from "clipboard";如果不应用 npm 治理，须要通过 script 引入或者通过 第三方 CDN 加载。
<script src="dist/clipboard.min.js"></script>而后通过传入 DOM 选择器 或 HTML 元素 或 HTML 元素数组 创立 Clipboard 实例。
new ClipboardJS('.btn'); 个别状况下，对于所有符合条件的元素都须要增加监听事件，但如果符合条件的元素较多，这样会耗费大量的内存。
因而，clipboard.js 应用了 事件代理，用一个监听器代替了全副的监听器，这样最大水平的保障了性能。
应用
从其余元素中拷贝内容
如果须要从其余元素中拷贝内容，能够通过在触发元素上增加 data-clipboard-target 属性，属性值为一个选择器，选中被拷贝元素。
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
</button>从其余元素中剪贴内容
在触发元素中增加 data-clipboard-action 属性，属性值能够为 copy 或者 cut，设置为 cut 即可剪贴内容，默认为 copy。
<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>留神：
cut仅在<input>或<textarea>元素中失效。
从属性中拷贝内容
如果不须要从其余元素中拷贝内容，那么能够在触发元素上增加 data-clipboard-text 属性，属性值为须要拷贝的内容。
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>事件处理
如果在拷贝完后须要执行其余自定义操作，能够增加 success 或 error 事件。
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();});
clipboard.on('error', function(e) {console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});实例展现：进入 官网，关上 console 即可。
Tooltips
因为每个利用都有不同的设计，因而 clipboard.js 不提供任何内置 css 的 tooltip 解决方案。
如果须要实现 tooltip 成果，能够参考官网实现相似成果，网站中应用的是 GitHub’s Primer 款式。
高级选项
如果不想批改 HTML
代码，也能够应用 API 实现上述成果，只须要在实例中申明函数，返回所需值。
例如，如果须要动静设置 target，能够返回一个 Node 节点。
new ClipboardJS('.btn', {text: function(trigger) {return trigger.getAttribute('aria-label');
}
}); 如果须要动静设置 text，能够返回一个 String。
new ClipboardJS('.btn', {text: function(trigger) {return trigger.getAttribute('aria-label');
}
});如果在 Bootstrap 模态框（Modals）中应用，或是在其余批改焦点的类库中应用，能够将取得焦点的元素设置为 container 属性的值。
new ClipboardJS('.btn', {container: document.getElementById('modal')
});同样地，单页面利用中，如果须要更加准确地治理 DOM 的生命周期，能够清理事件以及创立的对象。
var clipboard = new ClipboardJS('.btn');
clipboard.destroy();Vue3 中尝试应用 clipboard.js
新建一个 Vue3 我的项目，装置 clipboard.js
// 新建 vue 我的项目
vue create clipboard
// 装置
yarn add clipboard简略应用剪贴性能
批改 App.vue，引入 ClipboardJS，删除其余元素，新增测试用元素
<!-- App.vue -->
<template>
<div class="wrapper">
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git" />
<button
class="btn"
data-clipboard-target="#foo"
data-clipboard-action="cut"
>
Copy to clipboard
</button>
</div>
</template>在 Vue3 setup 函数中初始化 clipboard 实例
// 引入
import ClipboardJS from "clipboard";
// setup 函数中实例化
setup() {new ClipboardJS(".btn");
},能够看到点击按钮剪贴胜利！
增加 success 函数
当剪贴胜利后，弹出剪贴胜利信息，对上述示例稍作批改，input 中的内容采纳双向绑定：
<template>
<div class="wrapper">
<input id="foo" :value="content" />
<button
class="btn"
data-clipboard-target="#foo"
data-clipboard-action="cut"
>
Copy to clipboard
</button>
</div>
</template>
// setup 函数
setup() {const clipboard = new ClipboardJS(".btn");
const content = ref("clipboard 测试内容");
clipboard.on("success", (e) => {alert(` 剪贴胜利：${e.text}`);
console.info("Action:", e.action);
console.info("Text:", e.text);
console.info("Trigger:", e.trigger);
e.clearSelection();});
return {content};
}弹出框如下：
打印如下：
浏览器反对
开源前哨日常分享热门、乏味和实用的开源我的项目。参加保护 10 万 + Star 的开源技术资源库，包含：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。