Estoy tratando de agregar un botón que me permita copiar un fragmento de código que está a la vista en el portapapeles para una aplicación de catálogo de código en vue.js.
Cuando uso la biblioteca del portapapeles vue e intento esto en el componente de ejemplo:
<div class="full-screen-code-snippet"> {{ example.codeSnippet }} </div> <div class="full-screen-copy-button"> <button v-clipboard:copy="example.codeSnippet"></button> </div>el fragmento se muestra correctamente, pero el botón no. ¿Que esta pasando? ¿Cómo debo hacer para hacer este botón?
Debería usarlo como: v-clipboard="variableName" o con :copy lo mismo. puedes leer más sobre esto aquí o este
<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">Copy!</button> </div> </template> <script> new Vue({ el: '#app', template: '#t', data: function () { return { message: 'Copy These Text' } }, methods: { onCopy: function (e) { alert('You just copied: ' + e.text) }, onError: function (e) { alert('Failed to copy texts') } } }) </script>