移动端手势识别

如需安装所有解决方案，请参考全量解决方案安装

监听移动端的特殊手势操作转换为pc端操作（单击、双击、拖动、双指滑动/鼠标滚轮、双指单击/鼠标右键等事件）

单独安装此hook

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

使用

引入

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

示例

下面区域为可操作区域，操作时，页面显示当前操作类型

点我看代码

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>

useOperateTransform函数参数

参数名	说明	类型	默认值
target	操作元素，如果不传，函数会返回一个operateBoxRef元素引用供外部使用	MaybeRef<HTMLElement | undefined>	—
options	配置	Partial<UseGestrue2MouseEventOptions>	—
options?.targetRealSize	目标区域对应现实宽高（非页面元素宽高）	MaybeRef<UseGestrue2MouseTargetRealSizeType>	—
options?.onMouseEvent	鼠标点击事件	(e: UseGestrue2MouseTargetPositionType, button?: UseGestrue2MouseMouseButtonType) => void	—
options?.onMouseWheel	鼠标滚轮事件	(e: UseGestrue2MouseTargetPositionType, deltaY: number) => void	—
options?.throttle	throttle option	-	—

类型定义

点我看代码

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
  }
}