jQuery插件之clipboard.js

本期介绍一个非常常用的前端插件 Clipboard.js，Clipboard.js 实现了纯 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板的功能。

官方网站：clipboardjs.com

1.clipboard.js介绍

clipboard.js 现代化的拷贝文字，不依赖 flash, 不依赖其他框架，gzip 压缩后只有 3kb 大小.

「拷贝文字不应当是一件困难的事. 不需要过多繁杂的配置或者下载很多脚本文件. 最重要的，它不应该依赖flash或者其他框架，应该保持简洁」

「这就是创造clipboard.js的原因和目的」

2.clipboard.js的使用

两种安装方式

通过npm工具安装

npm install clipboard --save

CDN引入

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

使用

使用很简单

先引入clipboard.js

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

设置复制剪贴的内容

从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo"> 
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

你还可以定义一个 data-clipboard-action 属性来指明你想要复制还是剪切内容

<textarea id="bar">Mussum ipsum cacilds...</textarea>

<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

复制当前的内容，需要给目标元素设置一个data-clipboard-text 属性即可

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

事件

如果你想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字，这里有个示例供你参考。

我们通过触发自定义事件，比如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);
});

3.其他用法

如果你不想修改 HTML，提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。

例如, 你希望动态设置target, 你需要返回一个node节点.

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

如果你希望动态设置text, 你需要返回字符串。

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

如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得焦点的元素设置为 container属性的值。

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

同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

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

「感谢阅读，后面会不断分享自己工作中用到的开源库，大家一起交流学习」