最近做一个微信商城遇到点击复制订单号、银行卡号、手机号等等一系列点击复制操作,用到了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()
})
}