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

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

自定义封装图片预览组件

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

1、布局

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

  

    

      
    
    

      

        
      
      

        放大
        缩小
        还原
        左转
        右转
        关闭
        上一张
        下一张
        删除
      
      

        关闭
      
    
  

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文件中引入并传入图片列表即可

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