如何使用 vue.js 用图标替换按钮答案

【问题标题】：how to replace button with an icon using vue.js如何使用 vue.js 用图标替换按钮
【发布时间】：2018-04-04 19:45:56
【问题描述】：

我想包含一个图标或图像而不是按钮。因为，我采取了“输入类型=“文件”，我无法将此按钮设为图标。有没有办法在 div 边框内添加（+图标）？在这种情况下，如果用户按下 + 符号，他应该可以上传图片了。

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

【问题讨论】：

问题/问题是什么？

标签： vue.js quasar

【解决方案1】：

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

隐藏默认输入。
将您的自定义按钮添加到模板中。
单击自定义按钮时打开输入。

在您的模板中：

<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()
  }
}

【讨论】：