31.vue如何实现input,type=file背景图片和点击

2018-08-31  本文已影响26人  yaoyao妖妖

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>

上一篇 下一篇

猜你喜欢

热点阅读