vueuse的API 函数 useMouse

useMouse 是 vueuse 库中的一个API函数，它可以让你轻松地获取鼠标相关信息，包括鼠标的位置、是否按下鼠标等状态。在使用 useMouse 函数时，你需要在组件中导入它并调用它，然后就可以在组件中使用返回的鼠标信息了。

具体来说，useMouse 返回的是一个对象，它包含了以下属性：

- x: 鼠标相对于浏览器窗口左上角的横坐标
- y: 鼠标相对于浏览器窗口左上角的纵坐标
- screenX: 鼠标相对于屏幕左上角的横坐标
- screenY: 鼠标相对于屏幕左上角的纵坐标
- clientX: 鼠标相对于浏览器窗口左上角的横坐标（与 x 属性相同）
- clientY: 鼠标相对于浏览器窗口左上角的纵坐标（与 y 属性相同）
- offsetX: 鼠标相对于事件源元素左上角的横坐标
- offsetY: 鼠标相对于事件源元素左上角的纵坐标
- movementX: 鼠标在水平方向上移动的距离
- movementY: 鼠标在垂直方向上移动的距离
- isPressed: 鼠标是否被按下

以下是一个示例代码，展示如何在组件中使用 useMouse 函数：

<template>
  <div>
    <p>鼠标位置：{{ mouse.x }}, {{ mouse.y }}</p>
    <p>鼠标是否被按下：{{ mouse.isPressed ? '是' : '否' }}</p>
  </div>
</template>

<script>
import { useMouse } from 'vueuse'

export default {
  setup() {
    const mouse = useMouse()

    return {
      mouse,
    }
  },
}
</script>