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)
}