如何使用vue.js将按钮替换为图标 [英] how to replace button with an icon using vue.js

问题描述

我要包含图标或图像而不是按钮.因为我已经使用输入类型=文件"，所以我无法将该按钮作为图标.是否有任何方法可以在div边框内添加(+图标)?在这种情况下，如果用户按下+符号，应该可以上传图片.

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>

这是我的脚本

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

推荐答案

要将自定义按钮替换为默认按钮，您必须:

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

1. 隐藏默认输入.
2. 将自定义按钮添加到模板中.
3. 单击自定义按钮时打开输入.

在您的模板中:

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

使用您的方法:

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

这篇关于如何使用vue.js将按钮替换为图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！