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

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

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/