Copy text to clipboard using vue-clipboard2 - Vue.js
•
0 gefällt mir•678 views
Copying the selected text from the webpage or input HTML element is easy with the keyboard shortcut CTRL+C and context menu. To make it little easier for the user you can add a button. For copy text to clipboard in Vue.js you can use vue-clipboard2 package. In this tutorial, I show how you can copy text from HTML element on button click to the clipboard.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Copy text to clipboard using vue-clipboard2 - Vue.js
Ähnlich wie Copy text to clipboard using vue-clipboard2 - Vue.js (20)
Mehr von Yogesh singh
Mehr von Yogesh singh (8)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Copy text to clipboard using vue-clipboard2 - Vue.js
- 1. Copy text to Clipboard using vue-clipboard2 – Vue.js By Makitweb
- 2. Copying the selected text from the webpage or input HTML element is easy with the keyboard shortcut CTRL+C and context menu. To make it little easier for the user you can add a button. For copy text to clipboard in Vue.js you can use vue-clipboard2 package. In this tutorial, I show how you can copy text from HTML element on button click to the clipboard.
- 3. Contents - 1. Download Clipboard.js 2. HTML 3. Script 4. Conclusion
- 4. 1. Download Clipboard.js ● Download package from GitHub and extract in your project directory. ● Include vue-clipboard.min.js script with vue.js in the <head> section. <script src="vue.js"></script> <script src="vue-clipboard2-master/dist/vue-clipboard.min.js"></script>
- 5. 2. HTML Create two <textarea> and a button. The first textarea for inputting some text and the second textarea to display the copied text when a button gets clicked.
- 6. In the button define 3 attributes – ● v-clipboard:copy – Here, passed the model name message from where to copy text. ● v-clipboard:success – Pass method name onCopy. This called when text copied successfully. ● v-clipboard:error – Pass method name onError. This called when it failed to copy text.
- 7. <div id="app"> <textarea v-model='message'></textarea> <button type="button" v-clipboard:copy="message" v-clipboard:success="onCopy" v-clipboard:error="onError">Copy!</button> <br/> Copied Text: <br/><textarea v-model='copiedText'></textarea> </div>
- 8. 3. Script Create two data variables – message, and copiedText. Define two methods – ● onCopy – Called when copy text to the clipboard. Assign e.text to this.copiedText<>. ● onError – Called when failed to copy text.
- 9. new Vue({ el: '#app', data:{ message: '', copiedText: '' }, methods: { onCopy: function (e) { this.copiedText = e.text; }, onError: function (e) { console.log('Failed to copy texts') } } })
- 10. 4. Conclusion With vue-clipboard2.js package you can easily copy text to clipboard on the button click. It works same as copying text by pressing CTRL+C from the keyboard. You can view working demo here.
- 11. Share For More Vue.js related tutorial as well as other programming tutorials visit : Makitweb.com