【前端工具类】003-实时获取鼠标位置的工具类：useMousePosition

訾博ZiBo

发布于 2025-01-06 19:21:20

16400

代码可运行

文章被收录于专栏：全栈开发工程师全栈开发工程师

运行总次数：0

代码可运行

【前端工具类】003-实时获取鼠标位置的工具类：useMousePosition

一、Vue3 usexxx 写法

1、代码

import { ref, onMounted, onUnmounted } from "vue";

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  function handleMouseMove(event: MouseEvent) {
    x.value = event.clientX;
    y.value = event.clientY;
  }

  onMounted(() => {
    document.addEventListener("mousemove", handleMouseMove);
  });

  onUnmounted(() => {
    document.removeEventListener("mousemove", handleMouseMove);
  });

  return { x, y };
}

2、使用示例

<template>
  <div>
    <p>鼠标当前位置：({{ position.x }}, {{ position.y }})</p>
  </div>
</template>

<script>
import { useMousePosition } from "@/hooks/useMousePosition";

export default {
  setup() {
    const position = useMousePosition();

    return { position };
  },
};
</script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除

前端