<div ref="imgWrap" @mousewheel.prevent="rollImg" class="modal-img-wrap">

　　<img ref="img" :src="fullscreenImgSrc" @mousedown="moveImg" alt="大图" class="modal-img"/>

</div>

    moveImg (e) {

      e.preventDefault()

      // 获取元素

      let imgWrap = this.$refs.imgWrap

      let img = this.$refs.img

      let x = e.pageX - img.offsetLeft

      let y = e.pageY - img.offsetTop

      // 添加鼠标移动事件

      imgWrap.addEventListener('mousemove', move)

      function move (e) {

        img.style.left = e.pageX - x + 'px'

        img.style.top = e.pageY - y + 'px'

      }

      // 添加鼠标抬起事件，鼠标抬起，将事件移除

      img.addEventListener('mouseup', () => {

        imgWrap.removeEventListener('mousemove', move)

      })

      // 鼠标离开父级元素，把事件移除

      imgWrap.addEventListener('mouseout', () => {

        imgWrap.removeEventListener('mousemove', move)

      })

    },

    rollImg () {

      /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */

      let zoom = parseInt(this.$refs.img.style.zoom) || 100

      /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */

      zoom += event.wheelDelta / 12

      /* 最小范围 和 最大范围 的图片缩放尺度 */

      if (zoom >= 80 && zoom < 500) {

        this.$refs.img.style.zoom = zoom + '%'

      }

      return false

    }

    .modal-img {

        position: absolute;

        left: 50%;

        top: 50%;

        transform: translate(-50%, -50%);

        max-width: 100%;

        cursor: move;

        &-wrap {

          position: relative;

          width: 960px;

          height: 560px;

          overflow: hidden;

        }

      }