31.vue如何实现input,type=file背景图片和点击事件的控制

1.这里主要利用了一个知识点,就是label for属性会将点击事件传递给input框,
* display:none 设置input框隐藏,设置label的大小和按钮的大小相等,当点击label时会将点击事件传递给隐藏的input框,调起对应的事件
* 在这里注意要将label放在最上面,(可以通过z-index的值来设置)
* @click.stop可以阻止父元素的点击事件,只调用子元素的点击事件
* 在这里我尝试了网上的$ref id都没有起作用,不知道是不是我使用的地方有问题。。。。

  <input type="file" id="fileElem" style="display: none" onchange="handleFiles(this.files)">
          <button>
            <img :src='dataList[0].imgUrl' class="img-class"/>
            <label for="fileElem" class="label-class">
            </label>
            <button @click.stop="deletePic(0)" v-show="dataList[0].isCameraPic">
              <img :src='imgDelUrl' class="btn-delete"/>
            </button>
          </button>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。