复制粘贴插件——clipboard.js的使用(个人笔记)

原文链接:https://segmentfault.com/a/1190000020651289?utm_source=tag-newest

安装

npm 安装

npm install clipboard --save

或者,如果您不喜欢包管理,只需下载一个ZIP文件

设置

  • script 引入

     
    
  • 三方 CDN引入

现在需要通过传递一个DOM选择器、一个HTML标签或者一组HTML标签来实例化它

new ClipboardJS('.btn');  //通过类名.btn的元素实例化

在内部,我们需要获取与选择器匹配的所有元素,并为每个元素附加事件监听器。但你猜怎么着?如果有数百个匹配项,则此操作会消耗大量内存。
因此,我们使用事件委托,它将多个事件侦听器替换为一个侦听器。

报错

如出现innerHtml的报错,就把实例化写到定时器里面。

setTimeout(()=>{
    new Clipboard(document.getElementById('copyBtn'));
},1000)

使用方法

我们正在经历一个声明性的复兴,这就是为什么我们决定利用HTML5的数据属性来获得更好的可用性

复制

相当普遍的使用场景是从其他元素复制文本。在触发元素上添加 data-clipboard-target 属性,该属性值用来匹配另一个元素选择器。



无敌大帅哥

剪切

另外,也可以定义 data-clipboard-action 属性为 copy/cut 来,明确操作是 复制 / 剪切
如果忽略了这个属性,便默认 复制







正如上例,剪切 cut 的操作只能在