clipboard vue 一键复制

一键复制失败

首先 下载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)

}