H5、vue动态复制文本功能，ClipboardJS

先明确一点，vue的话不是vue clipboard

因为vue clipboard有个缺陷，就复制动态数据时候，会因为异步问题永远都是获取到上一次复制的内容，截至2个月前我是没看到有修复，如果有动态复制的需求看这里（vue的）

H5部分

用的clipboardjs ：http://www.clipboardjs.cn/

先说这个插件大概实现思路把
1.给复制按钮绑定了个属性，该属性的值指向了要被复制的元素
2.要被复制的元素绑定val=“xxxx”
3.js层面实例化并监听复制按钮，复制成功/失败回调。

那么就很清楚了，三个角色

html层面
<p value=123456" id="content">随便写</p>

<button 
	class="copy"
    data-clipboard-target="#content"> 
    复制
</button>


js层面
// 复制
var clipboard = new ClipboardJS('.copy');
clipboard.on('success', function(e) {
    addClickButton();
    CM.message('复制成功！');
    e.clearSelection();
});
clipboard.on('error', function(e) {
   ...
});

引入

可以通过npm工具安装

npm install clipboard --save
import clipboardJS form ’clipboard‘

这东西很小3kB
一般可以放在目录里面直接引入把