So ersetzen Sie die Schaltfläche mit einem Symbol mit vue.js

Question

Ich möchte ein Symbol oder Bild anstelle einer Schaltfläche enthalten. da, ich habe "input type =" file "genommen ich bin nicht in der lage diese taste als ein symbol zu machen. Gibt es eine möglichkeit (+ icon) innerhalb der div border hinzuzufügen? In diesem fall, wenn der benutzer auf + symbol drückt, er . sollte ein Bild hochzuladen können

<q-field 
        > 
        <img :src="image" class="user-image" @click="onFileChange"/> 
        <div v-if="!image"> 
         <input type="file" @change="onFileChange"> 
        </div> 
         <div v-else><q-btn icon="delete" color="secondary" round small @click="removeImage"/> 
        </div> 
        </q-field> 

hier ist mein Skript

methods: { 
onFileChange (e) { 
    alert('hema') 
    var files = e.target.files || e.dataTransfer.files 
    if (!files.length) { 
     return 
    } 
    this.createImage(files\[0\]) 
    }, 
    createImage (file) { 
    var reader = new FileReader() 
    var vm = this 
    reader.onload = (e) => { 
     vm.image = e.target.result 
    } 
    reader.readAsDataURL(file) 
    }, 
    removeImage: function (e) { 
    this.image = '' 
    } 
} 

Answer 1

um die Standard-Schaltfläche mit einer benutzerdefinierten Schaltfläche Sie müssen ersetzt werden:

1. verstecken die Standardeingabe.
2. Fügen Sie Ihre benutzerdefinierte Schaltfläche zur Vorlage hinzu.
3. Öffnen Sie die Eingabe, wenn Sie auf die benutzerdefinierte Schaltfläche klicken.

in Ihrer Vorlage:

<q-field> 
    <img :src="image" class="user-image" @click="onFileChange"/> 
    <div v-if="!image"> 
    <input type="file" @change="onFileChange" class="hidden"> 
    <!-- your custom button or image or any thing else --> 
    <q-btn icon="add" color="primary" round small @click="browse"/> 
    </div> 
    <div v-else> 
    <q-btn icon="delete" color="secondary" round small @click="removeImage"/> 
    </div> 
</q-field> 

in Ihren Methoden:

methods: { 
    browse() { 
    document.querySelector('input[type=file]').click() 
    } 
}