vue2实现拖拽选框功能

 <div :style="{ 
      position: 'absolute',
      top: boxTop,
      left: boxLeft,
      width: boxWidth,
      height: boxHeight,
      background: 'rgba(0,0,0,0.1)',
      border: '1px solid pink'
 }"></div>

    onConstituency(e) {
      if (this.isBoxShow) return false
      e.preventDefault()
      const phoneWidth = this.$refs.getPhoneWidth
      const box = phoneWidth.getBoundingClientRect()
      const scrollTop = phoneWidth.scrollTop
      const { left, top } = box
      const cx = e.pageX - left
      const cy = e.pageY - top
      const offsetY = cy
      const offsetX = cx
      const onMove = (e) => {
        const newLeft = Math.min(offsetX, e.pageX - left) + 'px'
        const newTop = Math.min(offsetY, e.pageY - top) + scrollTop + 'px'
        const newWidth = Math.abs(e.pageX - left - offsetX) + 'px'
        const newHeight = Math.abs(e.pageY - top - offsetY) + 'px'
        this.boxLeft = newLeft
        this.boxTop = newTop
        this.boxWidth = newWidth
        this.boxHeight = newHeight
      }
      const onUp = () => {
        document.removeEventListener('mousemove', onMove)
        document.removeEventListener('mouseup', onUp)
      }
      document.addEventListener('mousemove', onMove)
      document.addEventListener('mouseup', onUp)
    },