这篇文章主要介绍了Vue触发隐藏input file的方法实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
1、使用input透明覆盖法
将input的z-index设置为1以上的数字并覆盖到需点击的内容上，将input的样式opacity设置为0（即为透明度为0），这样通过绑定在input上的change事件触发 ----推荐
<p>
<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> <Button @click="choiceImg" icon="ios-cloud-upload-outline" type="primary">点击上传</Button> <input ref="filElem" type="file" @change="getFile"> </div> choiceImg(){ this.$refs.filElem.dispatchEvent(new MouseEvent('click')) }, getFile(){ console.log("成功"); }
3、使用HTML的lable机制触发input事件
<label for="upfile" @click="IDRecognition"> <span>身份证识别</span> <i></i> <input ref="filElem" type="file" accept="image/*" @change="uploadPic"> </label> IDRecognition: function() {}, //触发事件 uploadPic: function() { console.log('dsa'); }
lable上的for属性绑定input的id,即可通过触发lable上的点击事件触发input的change事件 ----推荐
总结
以上所述是小编给大家介绍的Vue触发隐藏input file的方法实例详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: