美文网首页
31.vue如何实现input,type=file背景图片和点击

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

作者: yaoyao妖妖 | 来源:发表于2018-08-31 13:11 被阅读26次

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>

相关文章

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

    1.这里主要利用了一个知识点,就是label for属性会将点击事件传递给input框,* display:no...

  • 图片上传案例

    demo js 实现 input type="file" 文件上传示例代码

  • 2018-05-04 日常问题总结:

    1.如何去除input默认属性:outline:none; 2.input type=file 用于上传图片, 3...

  • 奇淫巧技

    input type=file 手机浏览器打开相机 input 元素type=file时 ios内核浏览器默认事件...

  • 点击上传和拖拽上传

    点击上传 利用 type="file" 的 input,上面覆盖一个 div 或者其他元素,点击该元素时触发 in...

  • JS小技巧

    CSS 穿透覆盖默认样式input标签 上传type="file",使用img遮盖,防止img阻隔点击事件img ...

  • WKWebView, UIWebView H5标签input t

    今天介绍一下 html input type=file 控件如何实现自定义菜单。 安卓那边对这个控件的菜单貌似可...

  • vue框架实现文件上传功能

    1.将input的type指定为file并设置为隐藏,使用点击事件去触发input,写两个点击方法只是为了区分类型...

  • Q1:上传文件A以后, 再次上传文件A,不会触发onChange 。 onChange 触发的原理:系统会比较前后...

  • input fileapi

    1、input type='file' 需求:用户点击按钮弹出选择文件框框,可以多选,可以单选,然后将用户选择的...

网友评论

      本文标题:31.vue如何实现input,type=file背景图片和点击

      本文链接:https://www.haomeiwen.com/subject/luyswftx.html