Implementierungscode der HTML5-Zwischenablagefunktion

Kürzlich wurde Vue zur Entwicklung des eingebetteten H5 von Line (einer japanischen und koreanischen Plattform ähnlich dem chinesischen WeChat) verwendet. Eine der Anforderungen besteht darin, den aktuellen Link einzufügen, ihn dann an den PC zu senden und auf dem Computer zu öffnen. In der gesamten Sammlung wurden die folgenden Situationen gefunden:

Diese Situation gilt für das Kopieren von Text in Nicht-Eingabefeldern in die Zwischenablage

 <h1 id=content>Kopierter Inhalt</h1> <button id=button>Zum Kopieren klicken</button> <script> (function(){ button.addEventListener('click', function(){ var copyDom = document . querySelector('#content'); //Ausgewählten Bereich erstellen var range = document.createRange(); //Inhalt aus der Zwischenablage entfernen window.getSelection().removeAllRanges(); //Neuen Inhalt zur Zwischenablage hinzufügen window.getSelection().addRange(range); //Kopieren var erfolgreich = document.execCommand( 'copy') ; try{ var msg = successive : warning('Copy command was : ' + msg } Catch(err){ kopieren!'); } }) })() </script>

Wird zum Kopieren von Text im Eingabe- und Textbereich verwendet

 <input type=text id=input value=17373383> <br> <button type=button id=button>Kopieren Sie den Inhalt im Eingabefeld</button> <script> (function(){ button.addEventListener('click' , function (){ input.select(); document.execCommand('copy'); Alert('copy success') })() </script>

Diese Methode kann auch erweitert werden und erfüllt den gleichen Zweck wie Methode 1. Erstellen Sie dynamisch ein Eingabefeld, legen Sie dessen Inhalt auf den Inhalt fest, den Sie kopieren möchten, und entfernen oder verbergen Sie ihn schließlich.

3.js-Plug-in zum Kopieren von Inhalten in die Zwischenablage (clipboard.js)

Clipboard.js offizielle Website

Clipboard.js CDN-Adresse

Zitat:

NPM npm install --save clipboard

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

 <!--Standardmäßig wird der Attributwert von data-clipboard-text in .btn abgefangen--> <!-- <button class=btn data-clipboard-text=3>Kopieren</button> --> < !- -Intercept the value in the input input box--> <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 clipboard = new ClipboardJS('.btn'); clipboard.on('success', function (e) { console.log(e); }); clipboard.on('error', function (e) { console.log(e); });

Es gibt viele erweiterte Verwendungsmöglichkeiten. Weitere Informationen finden Sie auf der offiziellen Website-Logik

4. Das vom Vue-Framework bereitgestellte Zwischenablage-Plug-in vue-clipboard2

 Vue aus 'vue' importieren VueClipboard aus 'vue-clipboard2' importieren VueClipboard.config.autoSetContainer = true // diese Zeile hinzufügen Vue.use(VueClipboard)

Probe1

 <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>Kopieren!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', Daten: function () { return { message: 'Copy These Text' } }, Methoden: { onCopy: function (e) { warning('You just kopiert: ' + e.text) }, onError: Funktion (e) { Alert('Texte konnten nicht kopiert werden') } } }) </script>

Probe2

 <div id=app></div> <template id=t> <div class=container> <input type=text v-model=message> <button type=button @click=doCopy>Kopieren!</button> < /div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, Methoden: { doCopy: function () { this.$copyText(this.message).then(function (e) { Alert('Kopiert') console.log(e) }, function (e) { Alert('Kann nicht kopiert werden') console.log(e) }) } } }) </script>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.