vue2自定义封装图片预览组件

前言：预览图片现在已经有成熟的组件了，比如element ui的图片预览功能，但是现实开发过程中，element ui图片预览已经不满足需求了，比如涉及预览时删除图片以及下载图片

自定义封装图片预览组件

功能：滚轮滚动图片放大、还原图片、左旋转、右旋转、上一张、下一张、删除图片、预览大图
参数传入：是否显示图片、图片的url、图片预览图的宽度、图片预览图的宽度、预览列表

1、布局

这里的布局根据需求有两种，一种是显示当前第一张图片，点击预览也可切换下一张
另外一种是不显示图片，点击查看才可显示，这里通过一个变量isShowImg控制

  <div class="image-wrap">
    <div @click="onPreview" :class="[isShowImg ? '' : 'isShowImg']">
      <img
        v-if="isShowImg"
        class="thumb-image"
        :src="src"
        :style="{
          width: width,
          height: height
        }"
      />
    </div>
    <div class="mask" v-if="isShow">
      <div class="mask-image__wrap">
        <img
          id="customImage"
          class="origin-image"
          :src="originUrl"
          :style="styleObj"
          @wheel="onWheel"
        />
      </div>
      <div class="action">
        <button class="btn-item" @click="onZoom('in')">放大</button>
        <button class="btn-item" @click="onZoom('out')">缩小</button>
        <button class="btn-item" @click="onReset">还原</button>
        <button class="btn-item" @click="onRotate('left')">左转</button>
        <button class="btn-item" @click="onRotate('right')">右转</button>
        <button class="btn-item" @click="isShow = false">关闭</button>
        <button class="btn-item" @click="onPrev" v-if="isOnPrev">上一张</button>
        <button class="btn-item" @click="onNext" v-if="isOnNext">下一张</button>
        <button class="btn-item" @click="onDelete" v-if="isButton">删除</button>
      </div>
      <div class="close-wrap">
        <button class="btn-item" @click="isShow = false">关闭</button>
      </div>
    </div>
  </div>

2、预览图片

isShow 控制大图显示隐藏
previewList 为当前图片列表

    //  预览大图
    onPreview() {
      this.isShow = true;
      this.curIndex = this.index;
      if (this.previewList.length === 0) {
        this.originUrl = this.src;
      } else {
        if (this.curIndex < this.previewList.length) {
          this.originUrl = this.previewList[this.curIndex];
        }
      }
    }

3、放大缩小图片

使用鼠标滚轮事件，或者点击放大缩小按钮也可实现
原理：改变图片样式，使用css3

 onZoom(type) {
      if (this.isDone) return;
      this.isDone = true;
      const timer = setTimeout(() => {
        if (type === "in" && this.scale < MAX_SCALE) {
          this.scale = (this.scale * 100 + ZOOM_BASE * 100) / 100;
        } else if (type === "out" && this.scale > MIN_SCALE) {
          this.scale = (this.scale * 100 - ZOOM_BASE * 100) / 100;
        }
        this.styleObj = {
          transition: `transform ${this.interVal}`,
          transform: `scale(${this.scale}) rotate(${this.rotate}deg)`
        };
        this.isDone = false;
        clearTimeout(timer);
      }, INTERVAL);
    },
    //  鼠标滚轮事件
    onWheel(event) {
      event.deltaY < 0 ? this.onZoom("in") : this.onZoom("out");
    },

4、旋转

原理：改变图片样式，使用css3

    onRotate(type) {
      if (this.isDone) return;
      this.isDone = true;
      const timer = setTimeout(() => {
        if (type === "left") {
          this.rotate = this.rotate - ROTATE_BASE;
        } else {
          this.rotate = this.rotate + ROTATE_BASE;
        }
        this.styleObj = {
          transition: `transform ${this.interVal}`,
          transform: `scale(${this.scale}) rotate(${this.rotate}deg)`
        };
        this.isDone = false;
        clearTimeout(timer);
      }, INTERVAL);
    },

5、切换图片

原理，这个就比较容易了，主要是切换图片索引就可以

    onPrev() {
      if (this.curIndex <= 0) return;
      this.curIndex -= 1;
      this.originUrl = this.previewList[this.curIndex];
      this.onReset();
    },
    //  下一张
    onNext() {
      if (this.curIndex >= this.previewList.length - 1) return;
      this.curIndex += 1;
      this.originUrl = this.previewList[this.curIndex];
      this.onReset();
    },

6、删除图片

这里主要使用子传父来实现，这里就不描述了

7、使用

在某一个vue文件中引入并传入图片列表即可

 <PreviewImg
    :isShowImg="false"
     :previewList="list"
   />

这样就实现啦，其实原理很简单