一键复制失败
首先 下载clipboard插件
npm install clipboard --save
在需要的组件里引入 也可以全局引入
import Clipboard from 'clipboard'
在页面中使用
<
p
class="clipboardObj" <-- 作为选择器的标识，也可以使用id -->
:data-clipboard-text="inviteCode" <-- inviteCode要复制的内容 -->
@click="copy">一键复制</
p
>
在方法里写
copy () {
var
clipboard =
new
Clipboard(
'.clipboardObj'
)
// 这里可以理解为选择器，选择上面的复制按钮
clipboard.on(
'success'
, e => {
console.log
(
'复制成功'
)
// 释放内存
clipboard.destroy()
})
clipboard.on(
'error'
, e => {
// 不支持复制
console.log
(
'复制失败'
)
// 释放内存
clipboard.destroy()
})
}
也有可能遇到复制没有反应 我遇到有两种情况，第一种需要复制的内容为空 第二中 选择器没有找到要复制的内容
可以采取另一种方式
<
p
@click="copy($event,inviteCode)">一键复制</
p
> //inviteCode要复制的值
copy(e, text) {
const clipboard =
new
Clipboard(e.target, { text: () => text })
clipboard.on(
'success'
, e => {
console.log('复制成功')
// 释放内存
clipboard.off(
'error'
)
clipboard.off(
'success'
)
clipboard.destroy()
})
clipboard.on(
'error'
, e => {
// 不支持复制
console.log('复制失败')
// 释放内存
clipboard.off(
'error'
)
clipboard.off(
'success'
)
clipboard.destroy()
})
clipboard.onClick(e)
}