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

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

要实现的功能如下：

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

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

项目代码如下：

<div v-if="picNum > 0">
          <el-divider class="lineCss"></el-divider>
          <p class="padding-lr-sm">
            相册 <span style="color: #ff4343">（ {{ picNum }} ）</span>
            <img
              class="fr hover-pointer"
              style="margin-top: 3px; width: 16px"
              src="@/assets/img/rightP.png"
              alt=""
              @click="onPreview"
            />
          </p>
          <el-image-viewer v-if="showViewer && picNum > 0" :on-close="close" :url-list="srcList" />
          <el-divider class="lineCss2"></el-divider>
        </div>

        <div class="padding-lr-sm">
          <div class="flex flex-wrap margin-top-xs margin-bottom-xs">
            <el-image
              v-for="(item, index) in resdata.slice(0, 3)"
              :key="index"
              ref=""
              style="width: 75px; height: 50px; margin-right: 3px"
              :src="item.path"
              :preview-src-list="srcList"
            ></el-image>
          </div>
          <!-- <p class="tl" v-if="resdata.length <= 0">暂无数据 ~</p> -->
        </div>

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

showViewer: false,
      picNum: "",
      resdata: [
        // require("@/assets/img/lbt-01.jpg"),
        // require("@/assets/img/lbt-02.png"),
        // require("@/assets/img/lbt-01.jpg"),
        // require("@/assets/img/lbt-02.png"),
      ],
      srcList: [],

// 相册
                this.resdata = detailData.imgs;
                this.picNum = this.resdata.length;
                if (this.resdata.length > 0) {
                  this.resdata.map((item) => {
                    item.path = "/rule_law/pub/img" + item.path + "/" + item.xname;
                  });
                  this.resdata.forEach((item) => {
                    this.srcList.push(item.path);
                  });
                }

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

1.直接引这个组件

图1中的功能2 右箭头