使用clipboard.js库实现复制剪切功能

项目地址:https://github.com/zenorocha/clipboard.js

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

使用clipboard.js库实现复制剪切功能_第1张图片

为什么使用它

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

这是 clipboard.js 诞生的原因。

安装

你可以通过 npm 来安装它。

npm install clipboard --save

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

开始

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

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

new Clipboard('.btn');

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

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

使用

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

从另一个元素复制文本

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

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





从另一个元素剪切文本

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

如果你省略这个属性,则默认为复制(copy)。

使用clipboard.js库实现复制剪切功能_第2张图片





正如你所预料的,剪切(cut)动作只在