Vue项目添加图片预览功能不使用swiper

使用swiper插件实现图片预览总是有这样那样的问题，这次用element自带的组件 方便 快捷 好用！

要实现的功能如下：

功能1 功能2 都是需要大图预览 使用的方法不一样

功能1：使用element UI自带的大图预览

项目代码如下：

1.  
   <div v-if="picNum > 0">
2.  
   <el-divider class="lineCss"></el-divider>
3.  
   <p class="padding-lr-sm">
4.  
   相册 <span style="color: #ff4343">( {{ picNum }} )</span>
5.  
   <img
6.  
   class="fr hover-pointer"
7.  
   style="margin-top: 3px; width: 16px"
8.  
   src="@/assets/img/rightP.png"
9.  
   alt=""
10.  
    @click="onPreview"
11.  
    />
12.  
    </p>
13.  
    <el-image-viewer v-if="showViewer && picNum > 0" :on-close="close" :url-list="srcList" />
14.  
    <el-divider class="lineCss2"></el-divider>
15.  
    </div>
16.  
     
17.  
    <div class="padding-lr-sm">
18.  
    <div class="flex flex-wrap margin-top-xs margin-bottom-xs">
19.  
    <el-image
20.  
    v-for="(item, index) in resdata.slice(0, 3)"
21.  
    :key="index"
22.  
    ref=""
23.  
    style="width: 75px; height: 50px; margin-right: 3px"
24.  
    :src="item.path"
25.  
    :preview-src-list="srcList"
26.  
    ></el-image>
27.  
    </div>
28.  
    <!-- <p class="tl" v-if="resdata.length <= 0">暂无数据 ~</p> -->
29.  
    </div>

注意：使用数组对象会报错(避坑点一)

1.  
   showViewer: false,
2.  
   picNum: "",
3.  
   resdata: [
4.  
   // require("@/assets/img/lbt-01.jpg"),
5.  
   // require("@/assets/img/lbt-02.png"),
6.  
   // require("@/assets/img/lbt-01.jpg"),
7.  
   // require("@/assets/img/lbt-02.png"),
8.  
   ],
9.  
   srcList: [],

1.  
   // 相册
2.  
   this.resdata = detailData.imgs;
3.  
   this.picNum = this.resdata.length;
4.  
   if (this.resdata.length > 0) {
5.  
   this.resdata.map((item) => {
6.  
   item.path = "/rule_law/pub/img" item.path "/" item.xname;
7.  
   });
8.  
   this.resdata.forEach((item) => {
9.  
   this.srcList.push(item.path);
10.  
    });
11.  
    }

功能2：使用el-image-viewer(图片查看器)

1.直接引这个组件

图1中的功能2 右箭头

2.注意我们需要使用到的就只有urlList与onClose两个属性 ，一个用来放图片链接一个用来关闭查看器

打开看看他的props，如下：

所以要注意使用 :on-close事件 传方法过去(避坑点二)

 

注意：

如果图片会记忆上一次打开的图片，只有一张图片也能左右预览图片等等问题 

记得把srcList在调接口之前清空一下(避坑点三)

最终两个功能的效果图如图1所示

完结！

出处： https://www.cnblogs.com/wwyxjjz/p/17215100.html