移动端使用clipboard插件自动复制内容

最近做一个微信商城遇到点击复制订单号、银行卡号、手机号等等一系列点击复制操作，用到了clipboard插件，支持android，ios部分支持。可以通过执行ClipboardJS.isSupported()来判断浏览器是否支持clipboard。

一、安装

npm install clipboard --save

二、基本使用

import Clipboard from ‘clipboard’

场景：
1、当复制的内容在另一个dom，不在自身元素时，使用data-clipboard-target：
HTML：

<p>内容：<a id="targetValue">我是一个即将被复制的内容</a></p>
<button class="copyButton" data-clipboard-target="#targetValue" @click="copy">复制</button>

2、当复制的内容自身元素时，使用data-clipboard-text：
HTML：

<button class="copyButton" data-clipboard-text="我是一个即将被复制的内容" @click="copy"></button>

JS：

copy() {
   var clipboard = new Clipboard('.copyButton')
   clipboard.on('success', e => {
     this.$toast.success('复制成功')
     // 释放内存
     clipboard.destroy()
   })
   clipboard.on('error', e => {
     // 不支持复制
     this.$toast.fail('请长按复制')
     // 释放内存
     clipboard.destroy()
   })
 }