vue中点击复制粘贴功能 clipboard 移动端

页面是由 v-for 循环渲染出来，要给每一个结构里面的复制按钮加一个复制功能

　　npm install clipboard --save    安装，如果安装处问题，多安装几次，我自己也安装了好几次

import Copy1 from 'clipboard'  在复制功能的页面引用

在mounted生命周期里面：

mounted () {
  this.clipboard = (text) => {
    console.log(text, event)
    const cb = new Copy1('.t', {
      text: () => { return text.accountName + '
' + text.bankName + '
' + text.bankBigNumber + '
' + text.bankNumber }
    })
    cb.on('success', (e) => {
      this.$vux.toast.show({
        type: 'text',
        text: '复制成功'
      })

　　　　cb.destroy()   //这行代码很重要，

      e.clearSelection() // 这一行不知道有什么用，写在那没管它
    })
    cb.on('error', (e) => {
    })
  }
}

clipboard 这个变量是预先存在data里面的，用来存一个函数，函数里面定义整个复制的过程

new Copy1执行，传的第一个参数是一个class类名，这个类名直接添加在自己的复制按钮上就可以，v-for循环后，那么每一个复制按钮都有了这个类名
　　　　　　　　第二个参数是一个对象，定义要复制的内容，
之后用on来监听成功事件，成功后给一个弹窗提示，然后e.clearSelection()清除一下

---

Copy (id, event) {
  let newArr = this.list.filter((item, index) => {
    if (id === item.id) {
      return item
    }
  })
  this.clipboard(newArr[0])
}
Copy事件是定义在复制按钮上，接收了当前循环数据的id，以及事件对象，根据id拿到具体想复制的内容，在下面函数执行中传出去，因为我要同时复制多个内容，所以上面返回的text里面写了好几个，并且用换行符隔开

---

亲测，这个方法在ios和Android上都是友好的，看到我文章的朋友大胆用，欢迎讨论