Código de implementación de la función del portapapeles HTML5

Recientemente, Vue se utilizó para desarrollar el H5 integrado de Line (una plataforma japonesa y coreana similar a WeChat de China). Uno de los requisitos es pegar el enlace actual, luego enviarlo a la PC y abrirlo en la computadora. Toda la colección encontró las siguientes situaciones:

Esta situación se aplica al copiar texto en cuadros que no son de entrada al portapapeles.

 <h1 id=content>Contenido copiado</h1> <button id=button>Haga clic para copiar</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //Crea un rango seleccionado var range = document.createRange(); //Eliminar contenido del portapapeles window.getSelection().removeAllRanges(); //Agregar nuevo contenido al portapapeles window.getSelection().addRange(range); //Copiar var Success = document.execCommand( 'copiar') ; intentar { var msg = exitoso? exitoso: alerta ('El comando de copia fue:' + msg) catch (err) {alerta ('Ups, no se pudo); copiar!');

Se utiliza para copiar texto en entrada, área de texto

 <input type=text id=input value=17373383> <br> <button type=button id=button>Copiar el contenido en el cuadro de entrada</button> <script> (function(){ button.addEventListener('click' , función (){ input.select(); document.execCommand('copiar'); alerta('copia exitosa');

Este método también se puede ampliar y tiene el mismo propósito que el método 1. Cree dinámicamente un cuadro de entrada, establezca su contenido en el contenido que desea copiar y finalmente elimínelo u ocultelo.

3.js copia contenido al complemento del portapapeles (clipboard.js)

Sitio web oficial clipboard.js

clipboard.js dirección CDN

Cita:

NPM npm install --save clipboard

CDN <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></script>

 <!--El valor predeterminado es interceptar el valor del atributo de data-clipboard-text en .btn--> <!-- <button class=btn data-clipboard-text=3>Copiar</button> --> < !- -Intercepta el valor en el cuadro de entrada de entrada--> <input id=foo value=https://github.com/zenorocha/clipboard.js.git> <!-- Trigger --> <button class=btn data-clipboard-target=#foo> <img src=assets/clippy.svg </button> <script src=https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js></ script> <script> var portapapeles = new ClipboardJS('.btn'); clipboard.on('éxito', función (e) { console.log(e); }); portapapeles.on('error', función (e) { console.log(e); </script>);

Tiene muchos usos avanzados. Puede ir al sitio web oficial de lógica para obtener más detalles.

4. El complemento del portapapeles vue-clipboard2 proporcionado por el marco Vue

 importar Vue desde 'vue' importar VueClipboard desde 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // agrega esta línea Vue.use(VueClipboard)

Muestra1

 <div id=aplicación></div> <plantilla id=t> <div clase=contenedor> <tipo de entrada=texto v-modelo=mensaje> <tipo de botón=botón v-clipboard:copia=mensaje v-clipboard:éxito =onCopy v-clipboard:error=onError>Copiar!</button> </div> </template> <script> new Vue({ el: '#app', plantilla: '#t', datos: function () { return { mensaje: 'Copiar estos textos' } }, métodos: { onCopy: function (e) { alert('Acabas de copiar: ' + e.text) }, onError: function (e) { alert('Error al copiar textos') } } }) </script>

Muestra2

 <div id=aplicación></div> <plantilla id=t> <div clase=contenedor> <tipo de entrada=texto v-model=mensaje> <tipo de botón=botón @click=doCopy>¡Copiar!</botón> < /div> </template> <script> new Vue({ el: '#app', plantilla: '#t', datos: función () { return { mensaje: 'Copiar estos textos' } }, métodos: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copiado') console.log(e) }, function (e) { alert('No se puede copiar') console.log(e) }) } } }) </script>

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.