ant简单的图片弹窗查看

先看效果

点击缩略图，弹出图片查看，滚动鼠标放大缩小查看图片，右上角x点击关掉查看图片。

弹窗

<a-modal
    :centered="true"
    :visible="visible"
    width="100%"
    :footer="null"
    :closable="false"
    :maskClosable="false"
    @cancel="closeImg"
  >
    <img
      v-if="showImg"
      @mousewheel="changeImg($event)"
      @mousedown="mousedown($event)"
      :height="height"
      :style="{'transform':'translate('+x+'px,'+y+'px)'}"
      id="imgId"
      draggable="false"
      :src="showImg"/>
    <a-icon
      class="close"
      @click="closeImg"
      type="close" />
  </a-modal>

定义变量

        visible: false,
        showImg: '',
        x:0,
        y:0,
        startx:'',
        starty:'',
        endx:0,
        endy:0,
        height: 800

方法

changeImg(e){
        if(e.deltaY<0)
          this.height += 80
        else
          if (this.height > 80)
            this.height -= 80
      },
      mousedown(e){
        this.startx=e.pageX
        this.starty=e.pageY
        document.addEventListener('mousemove',this.mousemove)
        document.getElementById('imgId').addEventListener('mouseup',this.mouseup)
      },
      mousemove(e){
        this.x=e.pageX-this.startx+this.endx
        this.y=e.pageY-this.starty+this.endy
      },
      mouseup(){
        // 解除绑定mousemove
        document.removeEventListener('mousemove',this.mousemove,false)
        this.endx=this.x
        this.endy=this.y
      },
      closeImg () {
        this.visible = false
        this.x = 0
        this.y = 0
        this.startx = ''
        this.starty = ''
        this.endx = 0
        this.endy = 0
        this.height = 800
      }

css

<style scoped lang="less">
/deep/.ant-modal-wrap{
  overflow: visible;
}
/deep/.ant-modal-content {
  background-color: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh;
}
.close {
  position: fixed;
  right: 30px;
  top: 30px;
  color: white;
  font-size: 32px;
}
</style>

没实现旋转的效果，旋转用了拖动没效果了。

后面有时间在考虑一起实现。