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)
}