200字范文 > 前端一键复制粘贴插件——clipboard.js的使用

前端一键复制粘贴插件——clipboard.js的使用

时间：2022-01-06 18:54:56

将文本复制到剪贴板应该不难。配置它不需要几十个步骤，也不需要加载数百KB的js文件。但最重要的是，它不应该依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。

安装

从npm安装

npm install clipboard --save

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

设置

script引入

<scriptsrc="dist/clipboard.min.js"></script>

三方CDN引入

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

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

在内部，我们需要获取与选择器匹配的所有元素，并为每个元素附加事件监听器。但你猜怎么着?如果有数百个匹配项，则此操作会消耗大量内存。

因此，我们使用事件委托，它将多个事件侦听器替换为一个侦听器。

使用方法

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

复制

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

<p id="bar">无敌大帅哥</p><button class="btn" data-clipboard-target="#bar" > 复制 </button>

剪切

另外，也可以定义data-clipboard-action属性为copy/cut来，明确操作是复制 / 剪切

如果忽略了这个属性，便默认复制

<textarea id="bar">Mussum ipsum cacilds...</textarea><button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">Cut to clipboard</button>

正如上例，剪切cut的操作只能在<input>和<textarea>标签中起作用，在其他标签中会出现事件正常调用，但是操作是失败的，粘贴板是没有改变的。

通过属性复制文本

我们甚至不必需要其他承载文本的元素，仅通过在触发元素中添加data-clipboard-text属性来完成复制

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

注意：

data-clipboard-text“级别最高”，在data-clipboard-target等属性存在时，复制内容及相关参数以data-clipboard-text为准

事件

回调函数：success / error

var clipboard = new ClipboardJS('.btn');clipboard.on('success', function(e) {console.info('Action:', e.action);console.info('Text:', e.text);console.info('Trigger:', e.trigger);e.clearSelection();});clipboard.on('error', function(e) {console.error('Action:', e.action);console.error('Trigger:', e.trigger);});