Mobile Gesture Recognition

To install all solutions, please refer to Solutions Installation

Listens for special gesture operations on mobile devices and converts them to PC operations (click, double-click, drag, two-finger swipe/mouse wheel, two-finger click/right-click events, etc.)

Install this hook separately

npm

npm install @havue/use-gesture-2-mouse --save

yarn

yarn add @havue/use-gesture-2-mouse

pnpm

pnpm install @havue/use-gesture-2-mouse

Usage

Import:

import { useGestrue2Mouse } from 'havue'
// or
import { useGestrue2Mouse } from '@havue/hooks'
// or
import { useGestrue2Mouse } from '@havue/gesture-2-mouse'

Example

The following area is an interactive zone. When operating, the page will display the current operation type.

Click to view code

template

<template>
  <div ref="operateBoxRef" class="mouse-pass-through">
    {{ stateText }}
    <div class="point" :style="pointStyle"></div>
  </div>
</template>

script

<script setup lang="ts">
import { ref, reactive, computed, nextTick } from 'vue'
// import { useGestrue2Mouse } from '@havue/use-gesture-2-mouse'
import { useGestrue2Mouse } from '@havue/hooks'

const stateText = ref<string>('')

const originRect = ref({
  width: 1920,
  height: 1080
})

const currentPoint = reactive({
  x: 0,
  y: 0
})

const pointStyle = computed(() => {
  return {
    top: `${(100 * currentPoint.y) / originRect.value.height}%`,
    left: `${(100 * currentPoint.x) / originRect.value.width}%`
  }
})

const { operateBoxRef } = useGestrue2Mouse(undefined, {
  onMouseEvent: (e, button) => {
    Object.assign(currentPoint, {
      x: e.x,
      y: e.y
    })

    if (button) {
      stateText.value =
        button === 'left' ? '左键' : button === 'right' ? '右键' : button === 'middle' ? '鼠标中键' : '未按下键'
    }

    console.log(stateText.value, e)
  },
  onMouseWheel(e, deltaY) {
    Object.assign(currentPoint, {
      x: e.x,
      y: e.y
    })
    nextTick(() => {
      stateText.value = `滚动：deltaY:${deltaY}`
    })

    console.log(stateText.value, e)
  },
  TargetRealSize: originRect
})
</script>

style

<style lang="scss" scoped>
.mouse-pass-through {
  position: relative;
  width: 480px;
  height: 270px;
  overflow: hidden;
  background-color: rgb(41 109 86);

  .point {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

useGestrue2Mouse Function Parameters

Parameter	Description	Type	default
target	Target element. If not provided, returns operateBoxRef element reference	MaybeRef<HTMLElement | undefined>	—
options	Settings	Partial<UseGestrue2MouseEventOptions>	—
options?.targetRealSize	Real-world dimensions of target area (not page element dimensions)	MaybeRef<UseGestrue2MouseTargetRealSizeType>	—
options?.onMouseEvent	Handle mouse click event	(e: UseGestrue2MouseTargetPositionType, button?: UseGestrue2MouseMouseButtonType) => void	—
options?.onMouseWheel	Handle mouse wheel event	(e: UseGestrue2MouseTargetPositionType, deltaY: number) => void	—
options?.throttle	throttle option	-	—

Type Definitions

Click to view code

export type UseGestrue2MouseTargetRealSizeType = {
  width: number
  height: number
}

export type UseGestrue2MouseTargetPositionType = {
  elX: number
  elY: number
  x: number
  y: number
}

export type UseGestrue2MouseMouseButtonType = 'left' | 'right' | 'middle'

export type UseGestrue2MouseEventOptions = {
  onMouseEvent?: (e: UseGestrue2MouseTargetPositionType, button?: UseGestrue2MouseMouseButtonType) => void
  onMouseWheel?: (e: UseGestrue2MouseTargetPositionType, deltaY: number) => void
  TargetRealSize?: MaybeRef<UseGestrue2MouseTargetRealSizeType>
  throttle?: {
    wait: number
    leading?: boolean
    trailing?: boolean
  }
}