Vue-- conseguir una copia de la llave

　　Se ha reunido una nueva demanda - la realización de una función dominante de la copia, el siguiente método es aplicable a la PC y el terminal móvil también.

 

　　　　　　

 

 

• En primer lugar importar el portapapeles en el proyecto

NPM instalar portapapeles --save

 

• Introducido en el lugar de uso

importación portapapeles de 'portapapeles'

　　

El uso se divide en los dos siguientes:

Método uno:

• modelo

<Div class = "Copiar código"> 
    <p class = "titulo"> código de invitación </ P> 
    <p class = "code-texto"> inviteCode {{}} </ P> 
    <class = "P contra copias código botón "<- como selector de identificación puede ser usado ID -> 
       : Data-portapapeles-text =" inviteCode "<- contenido a copiar -> 
       @ = Haga clic en la" copia "> una llave de copia </ P> 
</ div>    

• guión

Copiar () { 
    var = new nueva portapapeles un (' botón.-Código-copia ') // portapapeles aquí será entendido como selectores, seleccione el botón de copia anterior 
    clipboard.on ( 'Éxito', E => { 
        tostadas (' copiado con éxito ') 
        // memoria liberación 
        clipboard.destroy () 
    }) 
    clipboard.on (' error 'E => { 
        // no soporta la replicación 
        pan tostado (' teléfono no admite la replicación de permisos) 
        // liberación de memoria 
        clipboard.destroy () 
    }) 
}

　　　　

Segundo método:

• modelo

<div class = "copia de código"> 
    <p class = "titulo">邀请码</ p> 
    <p class = "code-texto"> {{inviteCode}} </ p> 
    <p class = "contra copias código botón" 
       @ clic = "copia ($ evento, inviteCode)">一键复制</ p> 
</ div>

• guión

Copiar (E, texto) { 
    const = new nueva portapapeles un portapapeles (e.target, {texto: () => texto}) 
    clipboard.on ( 'Éxito', E => { 
        tostadas ( 'copiado con éxito') 
        // memoria de la liberación 
        clipboard.off ( 'error') 
        clipboard.off ( 'éxito') 
        clipboard.destroy () 
    }) 
    clipboard.on ( 'error', E => { 
        // hace replicación no ayuda 
        tostadas ( 'teléfono no admite la replicación de permisos' ) 
        // memoria liberación 
        clipboard.off ( 'error') 
        clipboard.off ( 'éxito') 
        clipboard.destroy () 
    }) 
    clipboard.onClick (E) 
}