js实现复制到剪切板 —— 插件clipboard.js

最近想捣鼓个页面，有个复制功能，虽然之前整理的复制功能能用（《js实现点击按钮复制目标内容》和《微信/头条/百度小程序实现点击复制功能》），但是就不用，我就是玩！然后，选择了clipboard.js插件，嗯，怎么说呢？这个插件，完全可以！下面我用了clipboard插件之后，觉得能用到的三种方法。

web场景

引用插件：

<script src="copy.js" type="text/javascript" charset="utf-8"></script>

使用方法

<input id="foo" value="我是内容，我会被复制！">
<button class="btn" data-clipboard-target="#foo">点击复制</button>

<script type="text/javascript">
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);
});
</script>

通过data-clipboard-target自定义属性指向需要复制的内容元素id或class。然后new ClipboardJS注册事件绑定事件元素即可！

vue场景

引用插件：

npm install clipboard --save

用法

<div id="text">我是内容，我会被复制！</div>
<button class="copy-btn" data-clipboard-target="#text" @click="copy">复制</button>


methods:{
      copy:function(){
            let clipboard = new ClipboardJS('.copy-btn');
            clipboard.on('success', function(e) {
                  console.log("复制成功");
                  e.clearSelection();
            });
            clipboard.on('error', function(e) {
                  console.log("复制失败，请重试");
                  console.log(e)
            }); 
      }
}

当然这两种都是通过自定义属性id指向实现的内容获取传递。除了data-clipboard-target这个属性外，还有一个data-clipboard-text属性，可以将内容直接写入，这样就不用在指向了。
例如：

<button class="copy-btn" data-clipboard-text="我是内容，会被复制到" @click="copy">复制</button>

这样也可以实现复制功能！

js实现

另外可以通过事件实现复制，而避免添加html5自定义属性。

let clipboard =  new ClipboardJS('.btn', {
    text: function(trigger) {
        return "我是复制内容，我将会被复制走！";
    }
});
clipboard.on('success', function(e) {
        console.log("复制成功");
        e.clearSelection();
});
clipboard.on('error', function(e) {
        console.log("复制失败，请重试");
        console.log(e)
}); 

这是我觉得最常用的复制的三种方式了，当前还有其他的，更多方法可以参考： 官方文档——https://clipboardjs.com/