web前端：Vue触发隐藏input file的方法

　　Vue系列产品为3D自然环境的动画制作和渲染提供了一系列的解决方案。Vue系列有很多不同的产品，这是为了满足不同阶层的用户的需要:可以满足专业的制作工作室，同样也能满足3D自由艺术家。

　　1、使用input透明覆盖法

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

　　<pclass="uploadImg">

　　<inputtype="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的点击事件触发

　　<divclass="upload-btn-box">

　　<Button@click="choiceImg"icon="iOS-cloud-upload-outline"type="primary">点击上传</Button>

　　<inputref="filElem"type="file"class="upload-file"@change="getFile">

　　</div>

　　choiceImg(){

　　this.$refs.filElem.dispatchEvent(newMouseEvent('click'))

　　},

　　getFile(){

　　console.log("成功");

　　}

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

　　<labelfor="upfile"class="pTitleRight"@click="IDRecognition">

　　<span>身份证识别</span>

　　<iclass="iconfont">&#xe612;</i>

　　<inputref="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事件。

　　在WWW上的一个超媒体文档称之为一个页面（page）。作为一个组织或个人在万维网上开始点的页面称为主页Homepage，或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。