web-dev-qa-db-fra.com

Comment copier le texte du champ de texte V Vuetify dans le presse-papier?

J'utilise Vuetify et essayer de copier du texte de v-text-field Composant au presse-papiers lorsque vous cliquez sur le bouton. Sample code available on codepen :

<template>
    <div id="app">
      <v-app id="inspire">
        <v-container>
          <v-text-field v-model="text1"></v-text-field>
          <v-btn @click="copyText">copy</v-btn>
        </v-container>
      </v-app>
    </div>
</template>

<script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data() { 
        return {
          text1: 'lorem ipsum 123'
        }
      },
      methods: {
        copyText (){
          // copy to clipboard
        }
      }
    })
</script>

La question est de savoir quel code mettez-le dans copyText méthode de Vue instance?

javascriptvue.jsvuejs2vue-componentvuetify.js
4
mlst

J'ai résolu avec Vue-Clipboards.

1.- NPM Installez VUE-Clipboards

2.- Ajouter ceci dans votre Main.js

import VueClipboards from 'vue-clipboards'
Vue.use(VueClipboards)

3.- Créez Vuetify BTN et ajoutez le V-Presse-Presse-papiers en dessous

<v-btn v-clipboard="clipboardValue">add to clipboard</v-btn>

4.- Dans votre section de données (vous pouvez remplir votre var dans n'importe quelle méthode ou où vous voulez).

data: () => ({
clipboardValue: 'something'
}),

5.- Exécutez votre code. tout c'est tout.

0
Lrodriguez84

Attribuer un ID au v-text-field élément comme:

   <v-text-field v-model="text1" id="tocopy" ></v-text-field>

et ajoutez le code suivant à votre méthode:

copyText(){
    let input=document.getElementById("tocopy");
   input.select();
         document.execCommand("copy");
    }

vérifiez ceci codepen

0
Boussadjra Brahim