您现在的位置是:主页 > Web前端技术 > Web前端技术
Vue页面内怎么将图片上传并适用折叠面板开发技术
IDCBT2021-12-27【服务器技术】人已围观
简介本篇内容介绍了“Vue页面内怎么将图片上传并适用折叠面板”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况
本篇内容介绍了“Vue页面内怎么将图片上传并适用折叠面板”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
一、Vue页面内附件展示区域代码<div class="retuinfo"> <div class="theadInfo-headline"> <span></span> {{FileDivName}} </div> <Collapse v-model="defaultCollapse"> <Panel v-for="(item,pngIndex) in pngFileArray" v-bind:key="pngIndex" :name="item.num" v-show="item.isshow"> {{item.name}} <div class="obsfilesdiv" slot="content"> <div v-for="(obs,index) in item.files" v-bind:key="index" class="obsfileslist"> <input ref="fileImg" type="file" accept="image/*;capture=camera" @change="setObsFile(item.num,1,obs.FileType,obs.Num,obs.Code)"> <label >{{obs.FileType}}<span v-show="obs.FileType!='其他'">*</span></label> <ul class="obsfilesul"> <li v-for="(objitem,objindex) in obs.FileObj" v-bind:key="objindex"> <img :src="objitem.imgurl ? objitem.imgurl : fileUrl" @click="showObsFiles(obs.FileFlag,objitem.imgurl)" /> <img src="../../../img/other/wrong.png" v-show="objitem.IsCanEdit" class="wrong_class" @click="deleteObsFlie(item.num,index,objindex,objitem.imgid,objitem.imgurl)" /> </li> <li @click="PlusClick(obs.FileType,obs.FileFlag,obs.Num)"> <img src="../../../img/icon-adds.png" alt="" /> </li> <div ></div> </ul> </div> </div> </Panel> </Collapse> </div> <div class="modal" v-show="viewBigImg"> <div class="img-view-modal" > <img :src="viewImgURL" @click="hideShow(0)"> <Icon type="md-close" size='20' @click="hideShow(0)" /> </div> </div> </div>标签:很赞哦! ()