vue3通过指令判断页面向左或者向右滑动

export const sliderDom = {
  mounted(el, binding) {
    addEventListener(el, binding)
  },
  unmounted(el) {
    removeEventListener(el)
  }
}
function removeEventListener(el) {
  el.removeEventListener('touchstart', () => {})
  el.removeEventListener('touchmove', () => {})
  el.removeEventListener('touchend', () => {})
}

function addEventListener(el, { value }) {
  const { leftDisabled = false, rightDisabled = false, elId, handleChange } = value

  // 纵向滑动时禁止水平滑动，水平滑动时禁止纵向滑动；
  // 水平滑动结束超过屏幕二分之一时则toggle；
  // 最大可滑动不超过屏幕的三分之二；
  let startX = 0
  let startY = 0
  let endX = 0
  let endY = 0
  let dValueX = 0
  let dValueY = 0
  let horizontalMoved = false
  let verticalMoved = false
  const filterEl = e => {
    return e.target.id === elId
  }
  const onTouchStart = e => {
    if (filterEl(e)) {
      startX = e.targetTouches[0].pageX
      startY = e.targetTouches[0].pageY
    }
  }

  const onTouchMove = e => {
    if (filterEl(e)) {
      endX = e.targetTouches[0].pageX
      endY = e.targetTouches[0].pageY
      dValueX = Math.abs(startX - endX)
      dValueY = Math.abs(startY - endY)

      // 水平滑动长度大于纵向滑动长度，选择水平滑动
      if (dValueX > dValueY) {
        if (verticalMoved) {
          e.preventDefault()
          return
        } else horizontalMoved = true

        e.preventDefault()
      } else {
        if (horizontalMoved) e.preventDefault()
        else verticalMoved = true
        verticalMoved = true
      }
    }
  }

  const onTouchEnd = e => {
    if (filterEl(e)) {
      // const range = window.screen.width / 3
      const range = 100
      if (horizontalMoved) {
        if (dValueX > range) {
          if (startX > endX) {
            // console.log('向左划')
            if (!leftDisabled) handleChange('left')
          } else if (startX < endX) {
            // console.log('向右划')
            if (!rightDisabled) handleChange('right')
          }
        }
      }
      if (verticalMoved) {
        // 处理纵向滑动逻辑
      }
      horizontalMoved = false
      verticalMoved = false
      startX = endX = 0
      startY = endY = 0
    }
  }
  el.addEventListener('touchstart', onTouchStart)
  el.addEventListener('touchmove', onTouchMove)
  el.addEventListener('touchend', onTouchEnd)
}