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

Question

我想要包含图标或图片而不是按钮。因为，我已经采取＆＃34;输入类型=＆＃34;文件＆＃34;我无法将此按钮设为图标。有没有办法在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 = ''
   }
}

Answer 1

要使用自定义按钮替换默认按钮，您必须：

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