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上都是友好的，看到我文章的朋友大膽用，歡迎討論