HY_358116732
HY_358116732

clipboard.js 介绍

这是著名开源项目 clipboard.js 的 README.md，我把它翻译成中文。发出来，方便自己和他人阅读。
项目地址：https://github.com/zenorocha/clipboard.js

现代化的“复制到剪切板”插件。不包含 Flash。gzip 压缩后仅 3kb。


为什么使用它

复制文字到剪切板不应该很难去实现。它不需要配置几十个步骤或者加载几百 KB 的文件。最重要的是，它不应该依赖 Flash 或其他臃肿的框架。

这是 clipboard.js 诞生的原因。

安装

你可以通过 npm 来安装它。

npm install clipboard --save

如果你不使用包管理，仅需要下载一个 ZIP 文件。

开始

首先，引入位于 dist 目录下的脚本文件，或者引入一个第三方CDN。

<script src="dist/clipboard.min.js">script>

然后，你需要通过传入一个DOM 选择器, HTML 元素, 或者 HTML 元素数组作为参数，来实例化对象。

new Clipboard('.btn');

本质上，我们需要获取所有选择器匹配到的元素，并为每一个选择器设置监听事件。但仔细想想，如果有成百上千个匹配到的元素，这样做会耗费大量内存。

因此，我们使用事件代理，通过一个事件监听器来取代多个事件监听。毕竟，性能是问题。

使用

我们正在经历一场声明式的复兴，这就是为什么我们决定利用 HTML5 data 属性 来提高可用性的原因。

从另一个元素复制文本

一个很常见的用例是从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能。

这个属性的值就是能匹配到另一个元素的选择器。


<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">


<button class="btn" data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
button>

从另一个元素剪切文本

此外，你可以定义一个 data-clipboard-action 属性来指明你想要复制（copy）还是剪切（cut）内容。

如果你省略这个属性，则默认为复制（copy）。


<textarea id="bar">Mussum ipsum cacilds...textarea>


<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
button>

正如你所预料的，剪切（cut）动作只在  或