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