vue中粘贴板clipboard的使用方法举例

npm install clipboard --save

<span id="copyTarget">{{targetCode}}</span>
<span id="copyBtn" @click="copy">复制</span>

import Clipboard from "clipboard";

//粘贴板方法
initClipboard(copyDom){
 // 因为此事件不能添加.stop，所以要设置一个开关, 500ms后打开开关
  this.itemIsDisabled = true
  setTimeout(()=>{
    this.itemIsDisabled = false
  }, 500)
  let clipboard = new Clipboard(copyDom,{
    text:function(){
        return document.querySelector(copyDom).innerHTML //复制的内容
    }
  });
  clipboard.on('success', e => {
    console.log(this, '复制成功!', 'success', e);
    clipboard.destroy() 
  })
  clipboard.on('error', e => {
    console.log(this, '该浏览器不支持自动复制!', 'warning', e);
    clipboard.destroy()
  })
},
//点击复制
copy(){
    this.initClipboard('#copyBtn')
}

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

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

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

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