微客导航 » 文章资讯 » Vue触发隐藏input file的方法实例详解

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

2023-08-17 16:08:04 302

1、使用input透明覆盖法

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

.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的点击事件触发


点击上传

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

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


身份证识别




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

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

总结

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

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐