Vue——实现一键复制

　　又遇到了一个新的需求——完成一键复制功能，下面这个方法在PC端和移动端同样适用。

 

　　　　　　

 

 

• 首先在项目中导入clipboard

npm install clipboard --save

 

• 在使用的地方引入

import Clipboard from \'clipboard\'

　　

使用方法又分为下面两种：

方法一：

• template

<div class="copy-code" >
    <p class="title">邀请码</p>
    <p class="code-text">{{inviteCode}}</p>
    <p class="copy-code-button"   <-- 作为选择器的标识，也可以使用id -->
       :data-clipboard-text="inviteCode"   <-- 要复制的内容 -->
       @click="copy">一键复制</p>
</div>    

• script

copy () {
    var clipboard = new Clipboard(\'.copy-code-button\') // 这里可以理解为选择器，选择上面的复制按钮
    clipboard.on(\'success\', e => {
        Toast(\'复制成功\')
        // 释放内存
        clipboard.destroy()
    })
    clipboard.on(\'error\', e => {
        // 不支持复制
        Toast(\'手机权限不支持复制功能\')
        // 释放内存
        clipboard.destroy()
    })
}

　　　　

方法二：

• template

<div class="copy-code" >
    <p class="title">邀请码</p>
    <p class="code-text">{{inviteCode}}</p>
    <p class="copy-code-button"
       @click="copy($event,inviteCode)">一键复制</p>
</div>

• script

copy(e, text) {
    const clipboard = new Clipboard(e.target, { text: () => text })
    clipboard.on(\'success\', e => {
        Toast(\'复制成功\')
        // 释放内存
        clipboard.off(\'error\')
        clipboard.off(\'success\')
        clipboard.destroy()
    })
    clipboard.on(\'error\', e => {
        // 不支持复制
        Toast(\'手机权限不支持复制功能\')
        // 释放内存
        clipboard.off(\'error\')
        clipboard.off(\'success\')
        clipboard.destroy()
    })
    clipboard.onClick(e)
}