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

共 3115字,需浏览 7分钟

 ·

2021-01-24 01:09

clipboard.js 用于剪贴板复制,gzip 压缩版仅有 3kb。

为什么选择 clipboard.js

将文本复制到剪贴板不应该搞得复杂,它不应该需要几十个步骤来配置或数百 KB 来加载,更不应该依赖于 Flash 或其他臃肿的框架。

clipboard.js 摆脱了这些限制,就可以实现便捷轻量的操作剪贴板。

安装

npm 安装:

npm install clipboard --save

或者下载压缩包文件:https://github.com/zenorocha/clipboard.js/archive/master.zip

配置

如果已经通过 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 属性,属性值为一个选择器,选中被拷贝元素。


<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,设置为 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 仅在

图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报