vue在移動端實現復制數值到剪貼版

實現按鍵就指定內容復制到設備的剪貼版，這里是復制快遞單號

html

<div slot="footer" v-if="express.number" style="padding: 20px 0">
          <span style="float: left;line-height: 30px">物流信息：{{express.company}}|{{express.number}}</span>
          <span class="req-feedback">
            <van-button class="bt-check bt-bright" @click="copyNumber">
             復制快遞單號
          </van-button>
          </span>
        </div>

 

js

import {handleClipboard} from '../../assets/js/clipboard' 
copyNumber () { // 物流單號復制
      handleClipboard(this.express.number, event, () => {
        alert('單號已經復制在剪貼版')
      }, () => {
        alert('單號復制失敗！')
      })
    },

 

安裝依賴：

"clipboard": "^2.0.4",

 

封裝好的clipboard.js  放在了assets/js/clipboard.js

 

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess () {
  Vue.prototype.$message({
    message: '復制成功',
    type: 'success',
    duration: 1500
  })
}

function clipboardError () {
  Vue.prototype.$message({
    message: '復制失敗',
    type: 'error'
  })
}

export function handleClipboard (text, event, onSuccess, onError) {
  event = event || {}
  const clipboard = new Clipboard(event.target, {
    text: () => text
  })
  clipboard.on('success', () => {
    onSuccess ? onSuccess() : clipboardSuccess()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.on('error', () => {
    onError ? onError() : clipboardError()
    clipboard.off('error')
    clipboard.off('success')
    clipboard.destroy()
  })
  clipboard.onClick(event)
}