[JavaScript知识库]vue element el-dialog 自定义指令实现拖拽、双击全屏

Vue.directive('drag', {
    bind (el) {
      const header = el.querySelector('.el-dialog__header')
      const elDialog = el.querySelector('.el-dialog')
      let isFullScreen = false
      let originalHeight = 0
      let originalWidth = 0
      let originalLeft = 0
      let originalTop = 0
      let originalMarginTop = 0
      header.style.cursor = 'move'
      let mouseDown = (e) => {
        e.preventDefault()
        // 算出鼠标相对元素的位置
        let disX = e.clientX - elDialog.offsetLeft
        let disY = e.clientY - elDialog.offsetTop

        const elDialogWidth = elDialog.offsetWidth
        const elDialogHeight = elDialog.offsetHeight

        const screenWidth = document.body.clientWidth
        const screenHeight = document.body.clientHeight

        const maxLeft = screenWidth - elDialogWidth

        const maxTop = screenHeight - elDialogHeight

        el.onmousemove = (e) => {
          e.preventDefault()
          // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
          let left = e.clientX - disX
          let top = e.clientY - disY

          // 边界检测
          if (left > maxLeft) {
            left = maxLeft
          } else if (-left > 0) {
            left = 0
          }

          if (top > maxTop) {
            top = maxTop
          } else if (-top > 0) {
            top = 0
          }

          // 移动当前元素
          elDialog.style.left = left + 'px'
          elDialog.style.top = top + 'px'
          elDialog.style.margin = 0
          elDialog.style.marginTop = 0
        }
        el.onmouseup = (e) => {
          e.preventDefault()
          el.onmousemove = null
          el.onmouseup = null
        }
      }
      header.onmousedown = mouseDown
      header.ondblclick = (e) => {
        if (!isFullScreen) {
          originalHeight = elDialog.clientHeight
          originalWidth = elDialog.clientWidth
          originalLeft = elDialog.style.left
          originalTop = elDialog.style.top
          originalMarginTop = elDialog.style.marginTop
          elDialog.style.height = '100vh'
          elDialog.style.width = '100vw'
          elDialog.style.left = 0
          elDialog.style.top = 0
          elDialog.style.marginTop = 0
          header.style.cursor = 'pointer'
          header.onmousedown = null
          isFullScreen = true
        } else {
          elDialog.style.height = originalHeight + 'px'
          elDialog.style.width = originalWidth + 'px'
          elDialog.style.left = originalLeft
          elDialog.style.top = originalTop
          elDialog.style.marginTop = originalMarginTop
          header.style.cursor = 'move'
          header.onmousedown = mouseDown
          isFullScreen = false
        }
      }
    }
  })