useMouse

一个鼠标位置和状态跟踪 Hook，提供实时的鼠标坐标、移动状态、按键状态等信息。支持相对定位、边界检测、自定义目标元素等功能。

基础用法

全局鼠标位置跟踪

最基本的用法是跟踪全局鼠标位置。

鼠标 X 坐标: 0px

鼠标 Y 坐标: 0px

源元素类型: mouse

移动鼠标查看坐标变化

显示代码

相对位置跟踪

可以指定目标元素，获取相对于该元素的鼠标位置。

在此区域移动鼠标

相对 X 坐标: 0px

相对 Y 坐标: 0px

是否在区域内: 否

显示代码

鼠标按键状态

检测鼠标按键的按下状态。

🖱️

左键

释放

🖱️

右键

释放

🖱️

中键

释放

在此区域按下鼠标按键查看状态变化

显示代码

API 参考

参数

参数	类型	默认值	说明
target	MaybeRefOrGetter<Element>	window	目标元素，用于相对定位
touch	boolean	true	是否启用触摸支持
resetOnTouchEnds	boolean	false	触摸结束时是否重置坐标
initialValue	Position	{ x: 0, y: 0 }	初始坐标值

返回值

属性	类型	说明
x	Ref<number>	鼠标 X 坐标
y	Ref<number>	鼠标 Y 坐标
sourceType	Ref<MouseSourceType>	输入源类型 (mouse | touch)
elementX	Ref<number>	相对于目标元素的 X 坐标
elementY	Ref<number>	相对于目标元素的 Y 坐标
elementPositionX	Ref<number>	目标元素的 X 位置
elementPositionY	Ref<number>	目标元素的 Y 位置
elementHeight	Ref<number>	目标元素的高度
elementWidth	Ref<number>	目标元素的宽度
isInside	Ref<boolean>	鼠标是否在目标元素内
buttons	Ref<number>	鼠标按键状态的位掩码

使用示例

基础位置跟踪

<template>
  <div>
    <p>鼠标位置: ({{ x }}, {{ y }})</p>
  </div>
</template>

<script setup>
import { useMouse } from "@vakao-ui/hooks";

const { x, y } = useMouse();
</script>

相对定位

<template>
  <div>
    <div ref="container" class="container">
      <div class="pointer" :style="{ left: x + 'px', top: y + 'px' }"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useMouse } from "@vakao-ui/hooks";

const container = ref();
const { x, y } = useMouse({ target: container });
</script>

<style>
.container {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #ccc;
}

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

鼠标按键检测

<template>
  <div>
    <p>左键: {{ leftPressed ? "按下" : "释放" }}</p>
    <p>右键: {{ rightPressed ? "按下" : "释放" }}</p>
    <p>中键: {{ middlePressed ? "按下" : "释放" }}</p>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useMouse } from "@vakao-ui/hooks";

const { buttons } = useMouse();

const leftPressed = computed(() => !!(buttons.value & 1));
const rightPressed = computed(() => !!(buttons.value & 2));
const middlePressed = computed(() => !!(buttons.value & 4));
</script>

触摸设备支持

<template>
  <div>
    <p>位置: ({{ x }}, {{ y }})</p>
    <p>输入类型: {{ sourceType }}</p>
  </div>
</template>

<script setup>
import { useMouse } from "@vakao-ui/hooks";

// 启用触摸支持，触摸结束时重置坐标
const { x, y, sourceType } = useMouse({
  touch: true,
  resetOnTouchEnds: true,
});
</script>