chat/_src/components/popup/imgPreview/index.vue

<template>
  <transition name="msgbox-fade">
    <div class="preview-mask pub-scroll-box" v-if="visible" @click="visible = false">
      <i class="el-icon-close" @click.stop="visible = false"></i>
      <img class="img" :src="imgUrl" alt="" ref="image"
           :style="{transform:`translate(${picLeft}px,${picTop}px) scale(${picScale})`}" @click.stop>
    </div>
  </transition>
</template>

<script>
import { isMobile } from '@/util/util'
import Hammer from 'hammerjs'

export default {
  name: 'imgPreview',
  data () {
    return {
      isClick: false, // 用作识别pc点击和拖拽
      isMobile: isMobile(),
      picW: 0, // 图片宽
      picH: 0, // 图片高
      picScale: 1, // 缩放比例
      picScaleMid: 1, // 缩放比例
      picInitTop: 0, // 最初top
      picInitLeft: 0, // 最初left
      picTop: 0,
      picLeft: 0,
      picTransform: '',
      image: null, // target图
      disX: 0,
      disY: 0
    }
  },
  methods: {
    initEvent () {
      if (this.isMobile) {
        this.handleH5()
      } else {
        this.handleDragPC()
        this.handleScalePC()
      }
    },
    removeEvent () {

    },
    // pc拖拽
    handleDragPC () {
      this.image.onmousedown = (ev) => {
        this.isClick = true
        this.dragStart(ev)

        if (this.image.setCapture) this.image.setCapture()
        document.addEventListener('mousemove', this.drag)
        document.addEventListener('mouseup', this.dragAfter)
        return false
      }
    },
    // pc缩放
    handleScalePC () {
      document.body.addEventListener('mousewheel', this.scale)
    },
    // h5拖拽、缩放
    handleH5 () {
      const mc = new Hammer.Manager(this.image)
      const tap = new Hammer.Tap({ pointers: 1 })
      const pan = new Hammer.Pan({ pointers: 1 })
      const pinch = new Hammer.Pinch({ pointers: 2 })
      mc.add([tap, pan, pinch])

      // 监听-tab
      mc.on(`tap`, (ev) => {
        // ev.preventDefault()
        this.visible = false
      })

      // 监听-拖拽
      mc.on(`panstart panmove panend tap, multitap`, (ev) => {
        // ev.preventDefault()
        if (ev.type == 'panstart') this.dragStart(ev)
        else if (ev.type == 'panmove') this.drag(ev)
        else if (ev.type == 'panend') this.dragAfter(ev)
      })

      // 监听-缩放
      mc.on(`pinchmove pinchin pinchout pinchend`, (ev) => {
        // ev.preventDefault()

        this.picScale = (this.picScaleMid * ev.scale).toFixed(2)
        if (ev.type == 'pinchend') {
          if (this.picScale < 1) this.picScale = 1
          this.picScaleMid = this.picScale
        }
      })
    },
    dragStart (ev) {
      if (this.isMobile) {
        this.disY = ev.deltaY
        this.disX = ev.deltaX
      } else {
        this.disY = ev.clientY
        this.disX = ev.clientX
      }
    },
    // 拖拽
    drag (ev) {
      this.isClick = false
      if (this.isMobile) {
        // 移动端
        this.picTop = ev.deltaY - this.disY
        this.picLeft = ev.deltaX - this.disX
      } else {
        // pc
        this.picTop = ev.clientY - this.disY
        this.picLeft = ev.clientX - this.disX
      }
    },
    dragAfter () {
      document.removeEventListener('mousemove', this.drag)
      document.removeEventListener('mouseup', this.dragAfter)
      if (this.image.releaseCapture) {
        this.image.releaseCapture()
      }

      // pc
      if (!this.isMobile && this.isClick) {
        this.visible = false
        this.isClick = false
      }

      this.picTop = this.picInitTop
      this.picLeft = this.picInitLeft
    },
    // 缩放
    scale (ev) {
      let picScale = this.picScale

      ev = ev || window.event
      if (ev.deltaY > 0) {
        this.picScale = picScale > 0.2 ? picScale - 0.1 : picScale
      } else {
        this.picScale += 0.1
      }
    }
  },
  mounted () {
    this.image = this.$refs.image

    // 先尝试从链接拿尺寸数据
    let img = new Image()
    img.src = this.imgUrl
    img.onload = () => {
      this.initEvent()
    }
  },
  destroyed () {
  }
}
</script>

<style lang="scss" scoped>
.preview-mask{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba($color: #000000, $alpha: .8);
  text-align: center;
  overflow: hidden;
  &::after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}
.img{
  max-width: 100%;
  max-height: 100%;
}
.el-icon-close{
  position: absolute;
  right: 6px;
  top: 6px;
  font-size: 30px;
  cursor: pointer;
  z-index: 1000;
  color: #ffffff;
}

.h5-wrap {
  .preview-mask{
    background-color: #000000;
  }
}
</style>