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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
js 日期转换成中文格式的函数
Jul 07 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
信息滚动效果的实例讲解
Sep 18 Javascript
详解Vue demo实现商品列表的展示
May 07 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
Dec 10 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
Laravel 5 学习笔记
2015/03/06 PHP
Jquery显示和隐藏元素或设为只读(含Ligerui的控件禁用,实例说明介绍)
2013/07/09 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
Angular2 路由问题修复详解
2017/03/01 Javascript
Vue 2.X的状态管理vuex记录详解
2017/03/23 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
vue2.0+koa2+mongodb实现注册登录
2018/04/10 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
利用python绘制正态分布曲线
2021/01/04 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
小学教师节活动总结
2015/03/20 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python