一鍵復制失敗
首先 下載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)
}