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

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

  

为什么选择 clipboard.js

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

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

安装

npm 安装:

  1. npm install clipboard --save 

或者下载压缩包文件:github.com/zenorocha/cl

配置

如果已经通过 npm 安装,则直接 import:

  1. import ClipboardJS from "clipboard"

如果不使用 npm 管理,需要通过 script 引入或者通过 第三方CDN 加载。

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

然后通过传入 DOM 选择器 或 HTML 元素 或 HTML 元素数组 创建 Clipboard 实例。

  1. new ClipboardJS('.btn'); 

一般情况下,对于所有符合条件的元素都需要添加监听事件,但如果符合条件的元素较多,这样会消耗大量的内存。 因此,clipboard.js 使用了 事件代理,用一个监听器替代了全部的监听器,这样最大程度的保证了性能。

使用

从其他元素中拷贝内容

如果需要从其他元素中拷贝内容,可以通过在触发元素上添加 data-clipboard-target 属性,属性值为一个选择器,选中被拷贝元素。

  1. <!-- Target --> 
  2. <input id="foo" value="https://github.com/zenorocha/clipboard.js.git"
  3.  
  4. <!-- Trigger --> 
  5. <button class="btn" data-clipboard-target="#foo"
  6.     <img src="assets/clippy.svg" alt="Copy to clipboard"
  7. </button> 

从其他元素中剪贴内容

在触发元素中添加 data-clipboard-action 属性,属性值可以为 copy 或者 cut,设置为 cut 即可剪贴内容,默认为 copy

  1. <!-- Target --> 
  2. <textarea id="bar">Mussum ipsum cacilds...</textarea> 
  3.  
  4. <!-- Trigger --> 
  5. <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar"
  6.     Cut to clipboard 
  7. </button> 
注意: cut 仅在 <input> 或 <textarea> 元素中生效。

从属性中拷贝内容

如果不需要从其他元素中拷贝内容,那么可以在触发元素上添加 data-clipboard-text 属性,属性值为需要拷贝的内容。

  1. <!-- Trigger --> 
  2. <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js"
  3.     Copy to clipboard 
  4. </button> 

事件处理

如果在拷贝完后需要执行其他自定义操作,可以添加 success 或 error 事件。

  1. var clipboard = new ClipboardJS('.btn'); 
  2.  
  3. clipboard.on('success', function(e) { 
  4.     console.info('Action:', e.action); 
  5.     console.info('Text:', e.text); 
  6.     console.info('Trigger:', e.trigger); 
  7.  
  8.     e.clearSelection(); 
  9. }); 
  10.  
  11. clipboard.on('error', function(e) { 
  12.     console.error('Action:', e.action); 
  13.     console.error('Trigger:', e.trigger); 
  14. }); 

实例展示:进入 官网,打开 console 即可。

Tooltips

由于每个应用都有不同的设计,因此 clipboard.js 不提供任何内置 css 的 tooltip 解决方案。

如果需要实现 tooltip 效果,可以参考官网实现类似效果,网站中使用的是 GitHub's Primer 样式。

高级选项

如果不想修改 HTML 代码,也可以使用 API 实现上述效果,只需要在实例中声明函数,返回所需值。

例如,如果需要动态设置 target,可以返回一个 Node 节点。

  1. new ClipboardJS('.btn', { 
  2.     text: function(trigger) { 
  3.         return trigger.getAttribute('aria-label'); 
  4.     } 
  5. }); 

如果需要动态设置 text,可以返回一个 String 。

  1. new ClipboardJS('.btn', { 
  2.     text: function(trigger) { 
  3.         return trigger.getAttribute('aria-label'); 
  4.     } 
  5. }); 

如果在 Bootstrap 模态框(Modals)中使用,或是在其他修改焦点的类库中使用,可以将获得焦点的元素设置为 container属性的值。

  1. new ClipboardJS('.btn', { 
  2.     container: document.getElementById('modal'
  3. }); 

同样地,单页面应用中,如果需要更加精确地管理 DOM 的生命周期,可以清理事件以及创建的对象。

  1. var clipboard = new ClipboardJS('.btn'); 
  2. clipboard.destroy(); 

Vue3 中尝试使用 clipboard.js

新建一个 Vue3 项目,安装 clipboard.js

  1. // 新建 vue 项目 
  2. vue create clipboard 
  3.  
  4. // 安装 
  5. yarn add clipboard 

简单使用剪贴功能

修改 App.vue,引入ClipboardJS,删除其他元素,新增测试用元素

  1. <!-- App.vue --> 
  2. <template> 
  3.   <div class="wrapper"
  4.     <input id="foo" value="https://github.com/zenorocha/clipboard.js.git" /> 
  5.  
  6.     <button 
  7.       class="btn" 
  8.       data-clipboard-target="#foo" 
  9.       data-clipboard-action="cut" 
  10.     > 
  11.       Copy to clipboard 
  12.     </button> 
  13.   </div> 
  14. </template> 

在 Vue3 setup 函数中初始化 clipboard 实例

  1. // 引入 
  2. import ClipboardJS from "clipboard"
  3.  
  4. // setup 函数中实例化 
  5. setup() { 
  6.   new ClipboardJS(".btn"); 
  7. }, 

可以看到点击按钮剪贴成功!

添加 success 函数

当剪贴成功后,弹出剪贴成功信息,对上述示例稍作修改,input 中的内容采用双向绑定:

  1. <template> 
  2.   <div class="wrapper"
  3.     <input id="foo" :value="content" /> 
  4.  
  5.     <button 
  6.       class="btn" 
  7.       data-clipboard-target="#foo" 
  8.       data-clipboard-action="cut" 
  9.     > 
  10.       Copy to clipboard 
  11.     </button> 
  12.   </div> 
  13. </template> 
  14.  
  15. // setup 函数 
  16.   setup() { 
  17.     const clipboard = new ClipboardJS(".btn"); 
  18.     const content = ref("clipboard 测试内容"); 
  19.     clipboard.on("success", (e) => { 
  20.       alert(`剪贴成功: ${e.text}`); 
  21.       console.info("Action:", e.action); 
  22.       console.info("Text:", e.text); 
  23.       console.info("Trigger:", e.trigger); 
  24.       e.clearSelection(); 
  25.     }); 
  26.     return { content }; 
  27.   } 

弹出框如下: 

 

 

 

 

 

打印如下: 

 

 


浏览器支持 

 

 

 

 

责任编辑:张燕妮 来源: 知乎
相关推荐

2023-05-17 16:47:47

物联网智能建筑

2020-01-21 19:39:31

数据中心服务器工具

2014-12-12 09:52:04

JavaScript

2010-04-13 15:14:31

Oracle优化

2018-09-30 14:46:38

Linux命令技巧

2015-11-27 12:59:11

Android技巧提高效率

2023-01-10 11:18:29

DevOps

2023-10-23 15:02:53

JavaScript

2019-06-25 08:42:13

Linux命令指令

2021-12-17 15:03:50

Python工具代码

2012-03-27 09:17:43

Visual Stud

2015-09-06 16:05:57

绿色数据中心效率

2020-06-04 15:55:54

GitHub代码开发者

2012-06-01 14:44:27

惠普台式机

2012-07-16 00:51:36

程序员效率

2015-05-22 14:01:50

编程提高效率

2016-03-07 11:09:00

.NET程序员开发工具

2022-11-30 15:22:02

DevOps软件开发运维

2010-09-09 16:51:50

2015-06-02 09:33:30

编程效率程序员
点赞
收藏

51CTO技术栈公众号