专栏名称: 伯乐在线
关注职业资讯；学习各类职业感悟、心得和经验分享，扩大职业视野；体会求职、工作和创业的历程 - 就在JobBole.com 伯乐在线
目录
相关文章推荐
51好读  ›  专栏  ›  伯乐在线

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

伯乐在线  · 公众号  · 程序员  · 2021-01-25 20:30

正文

请到「今天看啥」查看全文


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 仅在 或







请到「今天看啥」查看全文


推荐文章
加拿大约克论坛  ·  毁三观！一句话概括安省11所大学的庐山真面：约克大学竟然是一所备胎学校！
8 年前
砍柴网  ·  “公开敲诈勒索”？我们应该如何看待今年的央视315晚会？
8 年前
国际循环  ·  心房颤动及生活质量的症状预测指标
7 年前
腾讯游戏频道  ·  【话题】高考后的48小时你是如何度过的？听大神讲述高考往事
7 年前
读史  ·  二十年前没有空调，我们这样过夏天
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!