how to replace button with an icon using vue.js

问题

I want to include an icon or image instead of a button. since, i have taken "input type="file" i am not able make this button as an icon. Is there any way to add (+ icon) inside the div border? In that case, if user press on + symbol, he should be able to upload a picture.

 <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>

here is my script

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 = ''
   }
}

回答1:

To replace your default button with a custom button you have to:

hide the default input.
add your custom button to the template.
open the input when the custom button is clicked.

In your template:

<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 your methods:

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

来源：https://stackoverflow.com/questions/46903284/how-to-replace-button-with-an-icon-using-vue-js

标签

Vue.js

Quasar