H5移动端复制功能实现

1、vue项目中可使用vue-clipboard2，iOS 10.0以下版本不支持
npm安装：npm install vue-clipboard2 --save

// main.js
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

// page.vue
<img src="../../../static/images/xxx.png" alt="" class="icon-copy" v-clipboard:copy="item.ticketNo" v-clipboard:success="onCopy" v-clipboard:error="onError">

methods:{
  onCopy() {
    Toast({
      message: '复制成功',
      duration: 1000
    })
  },
  onError() {
    Toast({
      message: '复制失败',
      duration: 1000
    })
  },
}

2、clipboard 官网👉（http://www.clipboardjs.cn/）
npm安装：npm install clipboard --save
页面中引用（vue项目举例）：

<button class="icon-copy" :data-clipboard-text="ticketNo" @click="copy">copyNo</button>

import ClipboardJS from 'clipboard';

methods:{
 copy() {
  let clipboard = new ClipboardJS('.icon-copy');

  clipboard.on('success', function (e) {
    console.log('succ', e)
    Toast({
      message: '复制成功',
      duration: 1000
    })
    clipboard.destroy();
  })
  clipboard.on('error', function (e) {
    Toast({
      message: '复制失败',
      duration: 1000
    })
    clipboard.destroy();
  })
 },
}