Vue触发隐藏input file的方法实例详解


Posted in Javascript onAugust 14, 2019

1、使用input透明覆盖法

将input的z-index设置为1以上的数字并覆盖到需点击的内容上,将input的样式opacity设置为0(即为透明度为0),这样通过绑定在input上的change事件触发     ----推荐

<p class="uploadImg">
  <input type="file" @change="picUpload($event)" accept="image/*" />
</p>
.uploadImg {
  width: 100%;
  height: 1.46rem;
  position: relative;
  input {
   width: 1.46rem;
   height: 100%;
   z-index: 1;
   opacity: 0;
   position: absolute;
   cursor: pointer;
  }
}

2、使用vue的ref参数直接操作input的点击事件触发

<div class="upload-btn-box">
  <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">点击上传</Button>
  <input ref="filElem" type="file" class="upload-file" @change="getFile">
</div>

choiceImg(){
  this.$refs.filElem.dispatchEvent(new MouseEvent('click')) 
},
getFile(){
  console.log("成功");
}

3、使用HTML的lable机制触发input事件

<label for="upfile" class="pTitleRight" @click="IDRecognition">
<span>身份证识别</span>
  <i class="iconfont"></i>
  <input ref="filElem" type="file" accept="image/*" id="upfile" name="upfile" style="display: none;" @change="uploadPic">
</label>

IDRecognition: function() {},  //触发事件 
uploadPic: function() {
 console.log('dsa');
}

lable上的for属性绑定input的id,即可通过触发lable上的点击事件触发input的change事件    ----推荐

总结

以上所述是小编给大家介绍的Vue触发隐藏input file的方法实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 Javascript
DIV始终居中的js代码
Feb 17 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 #Javascript
微信小程序之数据绑定原理解析
Aug 14 #Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 #Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 #Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
Aug 14 #Javascript
vue filter 完美时间日期格式的代码
Aug 14 #Javascript
如何对react hooks进行单元测试的方法
Aug 14 #Javascript
You might like
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
使用JS操作页面表格,元素的一些技巧
2007/02/02 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
2015/11/30 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
Vue+webpack+Element 兼容问题总结(小结)
2018/08/16 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
layer设置maxWidth及maxHeight解决方案
2019/07/26 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python3下使用cv2.imwrite存储带有中文路径图片的方法
2018/05/10 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python3中rank函数的用法
2019/11/27 Python
numpy 声明空数组详解
2019/12/05 Python
利用jupyter网页版本进行python函数查询方式
2020/04/14 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
高中生班主任评语
2014/04/25 职场文书
中国梦演讲稿3分钟
2014/08/19 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
2014年学生管理工作总结
2014/12/20 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB