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 + '\n' + text.bankName + '\n' + text.bankBigNumber + '\n' + 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上都是友好的，看到我文章的朋友大膽用，歡迎討論