工作中经常会需要一些特定的业务需求，例如复制到剪贴板，实现类似xmind的流程图，各种推拽，截图等功能。 本篇汇总了一些常用插件，供需要时查阅。

• 复制到剪贴板 - clipboard

安装

从npm 安装

npm install clipboard --save

或者yarn安装

yarn add clipboard  -S

或者cdn引入

<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

或将cdn资源直接下载下来，放在自己服务内

使用方法

复制

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

<!-- Target -->
<!-- <input
  id="bar"
  value="我是需要复制的文本"
> -->
<p id="bar">我是需要复制的文本</p>
<!-- Trigger -->
<button class="btn" data-clipboard-target="#bar" > 复制 </button>

剪切

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

<!-- Target -->
<textarea id="bar">我是需要复制的文本...</textarea>

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

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

通过属性复制文本

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

<!-- Trigger -->
<button id="btn" data-clipboard-text="我是需要复制的文本">
    复制到剪贴板
</button>

注意：

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

事件

回调函数： success / error

事件名	参数
success	event.action copy/cut 操作
	event.text copy/cut 操作文本内容
	event.triger 触发操作的DOM元素
error	event.action copy/cut 操作
	event.triger 触发操作的DOM元素

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);
});

并且，如果在单页应用中使用时，要更精确地管理DOM的生命周期，可以使用以下方法清除创建的事件对象

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

浏览器支持

这个库同时依赖于Selection和execCommand api。所有浏览器都支持第一个，而以下浏览器支持第二个。

• Chrome 42 +
• Edge12 +
• Firefox 41 +
• IE 9 +
• Opera 29 +
• Safari 10 +

如果需要支持旧的浏览器，clipboard.js可以优雅地降级。你所要做的就是显示一个工具提示“复制!”在调用成功事件时，因为文本已经被选中，所以在调用错误事件时，请按Ctrl+C进行复制。
你也可以通过运行ClipboardJS.isSupported()来检查是否支持clipboard.js，这样你就可以从UI中隐藏复制/剪切按钮。