826327700 / vue-photo-preview

基于photoswipe的vue图片预览组件
471 stars 123 forks source link

无法正常使用vue-photo-preview #78

Closed w4ctech closed 4 years ago

w4ctech commented 4 years ago

bug

问题描述:无法正常使用vue-photo-preview,点击装备/铭文页后,再点击图片,图片无法放大 期待效果:点击装备/铭文页后,正常使用vue-photo-preview 复现仓库:w4ctech/king-of-glory-spider 版本号:876f3dc339b320e42c53927a50828fc4d32907cd 关键代码:

      <el-main v-if="TabInfo == 'hero'">
        <span>请求回来的图片总数是{{HeroData.length}}条,对应图片有{{HeroData.length}}张</span>
        <el-table
          :data="HeroData"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
          class="hero-table">
          <el-table-column
            label="英雄缩列图"
            width="320">
            <template slot-scope="HeroData">
              <img class="imgStyle" preview onerror="this.src='https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=29962016,3519493871&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=4da21179420b821182155a587a4a42db'"  :preview-text="HeroData.row.title + HeroData.row.cname" :src="'/heroImg/'+HeroData.row.ename+'/'+HeroData.row.ename+'-bigskin-1.jpg'" :title="HeroData.row.title + HeroData.row.cname">
            </template>
          </el-table-column>
          <el-table-column
            prop="cname"
            label="英雄姓名"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="title"
            label="伴生皮肤"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="skin_name"
            label="所有皮肤"
            sortable>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="160">
            <template slot-scope="HeroData">
              <el-button  @click="handleClick(HeroData.row.ename)" type="text" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-main v-if="TabInfo == 'equip'">
        <span>请求回来的图片总数是{{EquipData.length}}条,对应图片有{{EquipData.length}}张</span>
        <el-table
          :data="EquipData"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
          class="equip-table">
          <el-table-column
            label="装备缩列图"
            width="320">
            <template slot-scope="EquipData">
              <img class="imgStyle" preview onerror="this.src='https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=29962016,3519493871&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=4da21179420b821182155a587a4a42db'"  :preview-text="EquipData.row.item_name" :src="'/equipImg/itemimg/'+EquipData.row.item_id+'.jpg'" :title="EquipData.row.item_name">
            </template>
          </el-table-column>
          <el-table-column
            prop="item_name"
            label="装备名称"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            label="装备属性">
            <template slot-scope="EquipData">
              <span v-html="EquipData.row.des1"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-main v-if="TabInfo == 'inscription'">
        <span>请求回来的图片总数是{{InscriptionData.length}}条,对应图片有{{InscriptionData.length}}张</span>
        <el-table
          :data="InscriptionData"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
          class="inscription-table">
          <el-table-column
            label="铭文缩列图"
            width="320">
            <template slot-scope="scope">
              <img class="imgStyle" preview onerror="this.src='https://dss2.bdstatic.com/6Ot1bjeh1BF3odCf/it/u=29962016,3519493871&fm=74&app=80&f=JPEG&size=f121,121?sec=1880279984&t=4da21179420b821182155a587a4a42db'"  :preview-text="scope.row.ming_name" :src="'/equipImg/mingwen/'+scope.row.ming_id+'.png'" :title="scope.row.ming_name">
            </template>
          </el-table-column>
          <el-table-column
            prop="ming_name"
            label="铭文名"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            label="铭文属性"
            width="180">
            <template slot-scope="scope">
              <span v-html="scope.row.ming_des"></span>
            </template>
          </el-table-column>
          <el-table-column
            prop="ming_grade"
            label="铭文等级"
            sortable>
          </el-table-column>
        </el-table>
      </el-main>
Eating-Eating commented 4 years ago

请求完图片数据加个 .then(()=>{ this.$previewRefresh() }) 应该就可以了

w4ctech commented 4 years ago

请求完图片数据加个 .then(()=>{ this.$previewRefresh() }) 应该就可以了

thanks

t-sinbo commented 4 years ago

请求完图片数据加个 .then(()=>{ this.$previewRefresh() }) 应该就可以了

getData() { getCarInAndOut(this.listParam).then(res => { console.log(res);

            if(res.Entity !== null){
                var data = JSON.parse(res.Entity);
                console.log(data);
                for(var i=0;i<data.Data.length;i++){
                    data.Data[i].PassTime = data.Data[i].PassTime.replace("T",' ');
                    data.Data[i].CarImg = data.Data[i].CarImg + '?x-oss-process=image/resize,m_fill,h_20,w_40,limit_0'
                }
                this.testImgSrc = data.Data[1].CarImg;
                this.tableData = data.Data;
                this.pageTotal = data.Total;

            }

        }).then(()=>{
            this.$previewRefresh();
        })
    },

我在加上这个刷新之后,仍然无效。烦请问一下是什么问题呢?