仿写了el-image

问题：用户提出要求放大显示图片之后 移动图片到指定位置 要求点击下一张之后固定图片

在原有的组件上改了半天 没成功 然后自己仿照el-image修改了一下

组件

<template>
  <div>
    <img class="showImage" :src="url" alt="" @click="handleClick(url)" />
    <div
      class="el-image-viewer__wrapper"
      v-if="isshowMaak"
      ref="Mask"
      style="z-index:99999;"
    >
      <div class="mask" @click="handleClickMask"></div>
      <span
        class="el-image-viewer__close el-image-viewer__btn"
        @click="isshowMaak = false"
      >
        <i class="el-icon-close"></i>
      </span>
      <span
        class="el-image-viewer__next el-image-viewer__btn"
        @click="handleNext"
      >
        <i class="el-icon-arrow-right"></i>
      </span>
      <span
        class="el-image-viewer__prev el-image-viewer__btn"
        @click="handlePre"
      >
        <i class="el-icon-arrow-left"></i>
      </span>
      <div class="el-image-viewer__btn el-image-viewer__actions">
        <div class="el-image-viewer__actions__inner">
          <i class="el-icon-zoom-out" @click="handleReduce"></i>
          <i class="el-icon-zoom-in" @click="handleAdd"></i>
          <i class="el-image-viewer__actions__divider"></i>
          <i class="el-icon-full-screen" @click="scale = 1"></i>
          <i class="el-image-viewer__actions__divider"></i>
          <i class="el-icon-refresh-left" @click="rotate += 90"></i>
          <i class="el-icon-refresh-right" @click="rotate -= 90"></i>
        </div>
      </div>
      <div class="el-image-viewer__canvas">
        <img
          ref="singleMvIndex"
          @mousedown="move($event)"
          :style="{
            '--scale': scale,
            '--rotatedeg': rotatedeg,
            '--MoveLeft': MoveLeft,
            '--MoveTop': MoveTop
          }"
          class="imgStyle"
          v-for="(item, index) in srcList"
          v-if="currentIndex === index"
          :key="index"
          :src="item"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['url', 'srcList'],
  data() {
    return {
      imgObj: null,
      MoveL: 0,
      MoveT: 0,
      rotate: 0,
      marginL: 0,
      marginT: 0,
      scale: 1,
      cssText: '',
      client: null,
      image: null,
      imgWrap: null,
      scale: 1,
      currentIndex: 0,
      isshowMaak: false
    }
  },
  computed: {
    marginLeft() {
      return `${this.marginL}px`
    },
    marginTop() {
      return `${this.marginT}px`
    },
    rotatedeg() {
      return `${this.rotate}deg`
    },
    MoveLeft() {
      return `${this.MoveL}px`
    },
    MoveTop() {
      return `${this.MoveT}px`
    }
  },
  mounted() {},
  methods: {
    move(image) {
      const el = image.target
      image.preventDefault()
      // 获取鼠标到图片的距离
      let x = image.clientX - el.offsetLeft
      let y = image.clientY - el.offsetTop
      // console.log(x,y)
      document.onmousemove = e => {
        // 拼图随鼠标移动

        let eX = e.clientX - x
        const eY = e.clientY - y
        console.log(eX)
        console.log(eY)
        this.MoveL = eX
        this.MoveT = eY
      }

      document.onmouseup = e => {
        // 移动结束时的操作

        document.onmousemove = null

        document.onmouseup = null
      }
    },
    handleAdd() {
      if (this.scale < 1) {
        this.scale = this.scale + 0.25
      }
    },
    handleReduce() {
      if (this.scale > 0.25) {
        this.scale = this.scale - 0.25
      }
    },
    handleNext() {
      // 先得到当前的数组长度 最大可显示照片的索引就是count - 1
      const count = this.srcList.length
      if (this.currentIndex < count - 1) {
        this.currentIndex++
      } else {
        this.currentIndex = 0
      }
      this.$nextTick(() => {
        if (this.cssText) {
          this.$refs.imgViewer[0].style.cssText = this.cssText
        }
      })
    },
    handlePre() {
      console.log(this.currentIndex)
      // 先得到当前的数组长度 最小可显示照片的索引0 等于0 显示最后一张照片
      const count = this.srcList.length
      if (this.currentIndex === 0) {
        this.currentIndex = count - 1
      } else {
        this.currentIndex--
      }
      console.log(this.currentIndex)
    },
    handleClick(url) {
      this.MoveL = 0
      this.MoveT = 0
      this.rotate = 0
      this.marginL = 0
      this.marginT = 0
      this.scale = 1
      // 得到当前应该显示的照片索引
      this.currentIndex = this.srcList.findIndex(item => item == this.url)
      console.log(this.currentIndex)
      this.isshowMaak = true
    },
    handleClickMask() {
      this.isshowMaak = false
    }
  }
}
</script>

<style scoped>
.showImage {
  height: 35px;
  width: 35px;
}
.imgStyle {
  position: absolute;
  left: var(--MoveLeft);
  top: var(--MoveTop);
  z-index: 1;
  transform: scale(var(--scale)) rotate(var(--rotatedeg));
  width: 500px;
  
}
.el-image-viewer__btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.8;
  cursor: pointer;
  box-sizing: border-box;
  user-select: none;
}
.el-image-viewer__actions__inner {
  width: 100%;
  height: 100%;
  text-align: justify;
  cursor: default;
  font-size: 23px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
/deep/.el-image-viewer__actions {
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: 282px;
  height: 44px;
  padding: 0 23px;
  background-color: #606266;
  border-color: #fff;
  border-radius: 22px;
}
.el-image-viewer__next,
.el-image-viewer__prev {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 24px;
  color: #fff;
  background-color: #606266;
  border-color: #fff;
}
.el-image-viewer__close {
  top: 40px;
  right: 40px;
  width: 40px;
  height: 40px;
  font-size: 24px;
  color: #fff;
  background-color: #606266;
}

.el-image-viewer__wrapper {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0.5;
  background: #000;
}
/* .el-image-viewer__canvas {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
} */
</style>

使用

<template>
  <showPhotoDialog
    :url="url"
    :srcList="srcList"
  ></showPhotoDialog>
</template>

<script>
export default {
  data(){
    return{
      srcList1:[],
      url:''
    }
  }
}
</script>

<style></style>