Vue-- achieve a key copy

　　Has met a new demand - the completion of a key copy function, the following method is also applicable to the PC and the mobile terminal.

 

　　　　　　

 

 

• First import the clipboard in the project

npm install clipboard --save

 

• Introduced in the place of use

import Clipboard from 'clipboard'

　　

Usage is divided into the following two:

method one:

• template

<div class = "Copy-code"> 
    <P class = "title"> invitation code </ P> 
    <P class = "code-text"> inviteCode {{}} </ P> 
    <P class = "copy- code-button "<- as identification selector may be used ID -> 
       : Data-Clipboard-text =" inviteCode "<- content to be copied -> 
       @ = the Click" copy "> a copy key </ P> 
</ div>    

• script

Copy () { 
    var = new new Clipboard a Clipboard ( '.-code-Copy Button') // here will be understood as selectors, select the above copy button 
    clipboard.on ( 'Success', E => { 
        Toast (' copied successfully ') 
        // release memory 
        clipboard.destroy () 
    }) 
    clipboard.on (' error ', E => { 
        // does not support replication 
        Toast (' phone does not support replication permissions') 
        // release memory 
        clipboard.destroy () 
    }) 
}

　　　　

Method Two:

• 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 = new new Clipboard a Clipboard (e.target, {text: () => text}) 
    clipboard.on ( 'Success', E => { 
        Toast ( 'successfully copied') 
        // release memory 
        clipboard.off ( 'error') 
        clipboard.off ( 'Success') 
        clipboard.destroy () 
    }) 
    clipboard.on ( 'error', E => { 
        // does not support replication 
        Toast ( 'phone does not support replication permissions' ) 
        // release memory 
        clipboard.off ( 'error') 
        clipboard.off ( 'Success') 
        clipboard.destroy () 
    }) 
    clipboard.onClick (E) 
}