基于vue的移动端复制组件

移动端纯js复制功能可能会存在问题，此时组件就可以完美兼容一些复制失败的机型~

// clipboardJS   --> npm install clipboard

import Clipboard from 'clipboard'

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

// vue
<p @click="copyOrder('1234567890', $event)">一键复制</p>

<script>
    import clip from '@/utils/clipboard'; // ?
    export default {
        data () {
            return  {}
        },
        methods: {
            // 复制订单号
            copyOrder(text, event) {
                let _this = this
                clip(text, event, function(){
                    alert('复制成功')
                }, function() {
                    alert('请重新复制')
                })
            }
        }
    }
</script>