Código de implementação da função da área de transferência HTML5

Recentemente, o Vue foi usado para desenvolver o H5 embarcado do Line (uma plataforma japonesa e coreana semelhante ao WeChat da China. Um dos requisitos é colar o link atual, enviá-lo para o PC e abri-lo no computador). Toda a coleção encontrou as seguintes situações:

Esta situação se aplica à cópia de texto em caixas sem entrada para a área de transferência

 <h1 id=content>Conteúdo copiado</h1> <button id=button>Clique para copiar</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //Cria um intervalo selecionado var range = document.createRange(); //Remover conteúdo da área de transferência window.getSelection().removeAllRanges(); //Adicionar novo conteúdo à área de transferência window.getSelection().addRange(range); //Copiar var bem sucedido = document.execCommand( 'copy') ; try{ var msg = sucesso ? sucesso: falhou; comando de cópia foi: ' + msg); copiar!'); } }) })() </script>

Usado para copiar texto na entrada, textarea

 <input type=text id=input value=17373383> <br> <button type=button id=button>Copiar o conteúdo da caixa de entrada</button> <script> (function(){ button.addEventListener('click' , function (){ input.select(); document.execCommand('copy');

Este método também pode ser estendido e tem a mesma finalidade do método 1. Crie dinamicamente uma caixa de entrada, defina seu conteúdo como o conteúdo que deseja copiar e, finalmente, remova-o ou oculte-o.

3.js copia conteúdo para o plug-in da área de transferência (clipboard.js)

site oficial clipboard.js

Endereço CDN clipboard.js

Citar:

NPM npm install --save clipboard

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

 <!--O padrão é interceptar o valor do atributo de data-clipboard-text em .btn--> <!-- <button class=btn data-clipboard-text=3>Copiar</button> --> < !- -Intercepte o valor na caixa 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 área de transferência = new ClipboardJS('.btn'); console.log(e }); área de transferência.on('erro', função (e) { console.log(e); });

Existem muitos usos avançados nele. Você pode acessar a lógica do site oficial para obter mais detalhes.

4. O plug-in da área de transferência vue-clipboard2 fornecido pela estrutura Vue

 importar Vue de 'vue' importar VueClipboard de 'vue-clipboard2' VueClipboard.config.autoSetContainer = true // adicione esta linha Vue.use(VueClipboard)

Amostra1

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button v-clipboard:copy=message v-clipboard:success =onCopy v-clipboard:error=onError>Copiar!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', dados: function () { return { message: 'Copy These Text' } }, métodos: { onCopy: function (e) { alert('Você acabou de copiar: ' + e.text) }, onError: function (e) { alert('Falha ao copiar textos') } } }) </script>

Amostra2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>Copiar!</button> < /div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, métodos: { doCopy: function () { this.$copyText(this.message).then(function (e) { alert('Copiado') console.log(e) }, function (e) { alert('Não é possível copiar') console.log(e) }) } } }) </script>

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.