VUE 座位图功能+扩展

1、通过循环画出页面座位图

    

        

            

                

                    

                      {{ i.sign }}
                    
                
            
    

2、画出右下角的预览图

3、编写对应js方法

watch: {
    seatList: {
        handler (newVal, oldVal) {
            if (this.seatList && !stringBlank(this.seatList.height)) {
                this.seatForm = JSON.parse(JSON.stringify(this.seatList))
                this.loading = false
                if (stringBlank(oldVal) || stringBlank(oldVal.height)) {
                    this.refreshZoom()
                }
            }
        },
        immediate: true,
        deep: true
    }
},
computed: {
    realWidth () {
        return this.zoomWidth * this.zoom
    },
    realHeight () {
        return this.zoomHeight * this.zoom
    },
    zoomMultiple () {
        return Math.floor(this.realWidth / 150 * 100) / 100
    },
    loopWidthOriginal () {
        return Math.floor(this.realWidth / this.zoomMultiple)
    },
    loopHeightOriginal () {
        return Math.floor(this.realHeight / this.zoomMultiple)
    },
    widthMultiple () {
        return Math.floor(this.zoomWidthOriginal / this.realWidth * 100) / 100
    },
    heightMultiple () {
        return Math.floor(this.zoomHeightOriginal / this.realHeight * 100) / 100
    },
    loopWidth () {
        return this.loopWidthOriginal * this.widthMultiple
    },
    loopHeight () {
        return this.loopHeightOriginal * this.heightMultiple
    },
    loopLeft () {
        return Math.floor(this.loopWidth * this.scrollLeft / this.widthMultiple / this.realWidth * 10) / 10
    },
    loopTop () {
        return Math.floor(this.loopHeight * this.scrollTop / this.heightMultiple / this.realHeight * 10) / 10
    }
},
mounted () {
    const element = this.$refs.zoomDiv
    element.addEventListener('wheel', this.preventDefaultWheel)
},
beforeDestroy () {
    const element = this.$refs.zoomDiv
    element.removeEventListener('wheel', this.preventDefaultWheel)
},
methods: {
    preventDefaultWheel (event) {
        event.preventDefault()
        event.stopPropagation()
    },
    refreshZoom () {
        if (this.seatForm.table.zoom) {
            this.zoom = this.seatForm.table.zoom
        }
        if (this.seatForm.table.zoomMax) {
            this.zoomMax = this.seatForm.table.zoomMax
        }
        if (this.seatForm.table.zoomMin) {
            this.zoomMin = this.seatForm.table.zoomMin
        }
        document.getElementById('zoomImg').style.zoom = this.zoom
        this.$nextTick(() => {
            this.makePicture()
        })
    },
    zoomDiv () {
      const scrollContainer = this.$refs.zoomDiv
      this.scrollTop = scrollContainer.scrollTop
      this.scrollLeft = scrollContainer.scrollLeft
    },
    zoomImg (e) {
      let zoomImg = document.getElementById('zoomImg')
      if (e.wheelDelta < 0) {
        this.zoom -= 0.05
      } else {
        this.zoom += 0.05
      }
      if (this.zoom >= this.zoomMax) {
        this.zoom = this.zoomMax
      }
      if (this.zoom <= this.zoomMin) {
        this.zoom = this.zoomMin
      }
      zoomImg.style.zoom = this.zoom
    },
    makePicture () {
      let zoomImg = document.getElementById('zoomImg')
      this.zoomWidth = zoomImg.offsetWidth
      this.zoomHeight = zoomImg.offsetHeight
      this.zoomWidthOriginal = this.zoomWidth * this.zoom
      this.zoomHeightOriginal = this.zoomHeight * this.zoom
      if (this.zoomHeightOriginal > 480) {
        this.zoomHeightOriginal = 480
      }
      this.$nextTick(() => {
        html2canvas(zoomImg, {backgroundColor: '#c8c8c8'}).then(canvas => {
          const imgData = canvas.toDataURL('image/png')
          this.imgPhoto = imgData
        })
      })
      this.loading = false
    },
}

4、对应CSS样式 

.loop {
  position: absolute;
  top: 0px;
  left: -1px;
  border: 2px solid #ee3846;
  border-radius: 5px;
  opacity: 0.8;
}
.right-bottom-block {
  border: 1px solid #e5e5e5;
  border-radius: 0px;
  position: absolute;
  bottom: 0px;
  right: 50px;
  width: 150px;
}

样式如下