您现在的位置是:主页 > 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>

标签:

很赞哦! ()

本栏推荐