脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue触发隐藏input file的方法

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

 更新时间：2019年08月14日 13:49:00   作者：我咯I  
这篇文章主要介绍了Vue触发隐藏input file的方法实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下

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">&#xe612;</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的方法实例详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • Vue2+Element-ui实现el-table表格自适应高度的案例

    Vue2+Element-ui实现el-table表格自适应高度的案例

    这篇文章主要介绍了Vue2+Element-ui实现el-table表格自适应高度的案例,本文结合示例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • 详解Vue的组件注册

    详解Vue的组件注册

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能,需要的朋友可以参考下
    2023-05-05
  • vue3如何使用eventBus订阅发布模式

    vue3如何使用eventBus订阅发布模式

    EventBus是一种发布/订阅事件设计模式的实践,下面这篇文章主要给大家介绍了关于vue3如何使用eventBus订阅发布模式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Vue引入高德地图并触发实现多个标点的示例详解

    Vue引入高德地图并触发实现多个标点的示例详解

    这篇文章主要介绍了Vue引入高德地图并触发实现多个标点,主要是在public下的index.html中引入地图，引入组件设置宽高100%，本文通过示例代码给大家介绍的非常详细，需要的朋友可以参考下
    2022-05-05
  • vue学习笔记之给组件绑定原生事件操作示例

    vue学习笔记之给组件绑定原生事件操作示例

    这篇文章主要介绍了vue学习笔记之给组件绑定原生事件操作,结合实例形式详细分析了vue.js组件绑定原生事件相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-02-02
  • Vue组件模板的几种书写形式(3种)

    Vue组件模板的几种书写形式(3种)

    这篇文章主要介绍了Vue组件模板的几种书写形式(3种)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue打包之后配置统一请求地址步骤详解

    vue打包之后配置统一请求地址步骤详解

    这篇文章主要为大家介绍了vue打包之后配置统一请求地址实现步骤详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • Element-ui el-tree新增和删除节点后如何刷新tree的实例

    Element-ui el-tree新增和删除节点后如何刷新tree的实例

    这篇文章主要介绍了Element-ui el-tree新增和删除节点后如何刷新tree的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue中el-table和jsplumb实现连线功能

    vue中el-table和jsplumb实现连线功能

    本文主要介绍了el-table和jsplumb实现连线功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version

    关于IDEA中的.VUE文件报错 Export declarations are not supported by cu

    这篇文章主要介绍了关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version的问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-10-10

最新评论