uniapp中复制粘贴功能方法的封装，兼容多端

uniapp中有现成的复制方法：uni.setClipboardData，但是好像H5端不支持，然后就网上搜了一下，发现使用vue-clipboard2来做H5端复制的居多，自己试验了一下，也挺好用的，但是有一个坑就是：vue-clipboard2的复制方法不能用在async的方法内，于是做了个小调整解决了此问题。下面就记录一下使用方法以及自己封装的方法。

一、安装vue-clipboard2

npm install --save vue-clipboard2

二、在main.js里面加入如下代码

// #ifdef H5
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
// #endif

三、封装复制方法

import APP from '@/main'
/**
 * 复制文本
 * @param {被复制的文本} text
 * @param {复制成功的回调} callback
 */
export const copyText = (text = '', callback = null) => {
  // #ifdef H5
  const systemInfo = uni.getSystemInfoSync()
  if (systemInfo.platform === 'ios') {
    //此处放在setTimeout里面执行解决不能在async方法里面执行的问题，否则的话ios里面可能会复制不成功
    setTimeout(() => {
      APP.$copyText(text).then(
        (res) => {
          if (callback) {
            callback()
          }
        },
        (err) => {
          APP.$u.toast('复制失败')
        }
      )
    })
  } else {
    APP.$copyText(text).then(
      (res) => {
        if (callback) {
          callback()
        }
      },
      (err) => {
        APP.$u.toast('复制失败')
      }
    )
  }
  // #endif
  // #ifndef H5
  uni.setClipboardData({
    data: text,
    success: () => {
      if (callback) {
        callback()
      }
    }
  })
  // #endif
}

四、使用

//在业务逻辑中直接调用copyText方法即可（此处我将该方法绑定到全局变量中，所以可以直接使用this.$sys来调用，这个根据各自实际情况而定）
this.$sys.copyText('hello', () => {
    this.$u.toast('复制成功')
})