vue3【仿 react 的 hook】封装 useMousePosition

朝阳39

已于 2024-07-16 10:15:05 修改

阅读量453

点赞数 5

分类专栏： Vue3 文章标签： vue.js

于 2024-04-17 15:31:12 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/137875217

版权

Vue3 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

本文介绍了如何在Vue应用中使用自定义hookuseMousePosition，通过ref和生命周期钩子管理鼠标坐标，实现实时更新并展示在页面上。

摘要由CSDN通过智能技术生成

抽离逻辑代码到一个函数
函数命名约定为 useXxxx格式 ( React Hooks 也是 )
在 setup 中引用 useXxx 函数

演示代码：实时获取鼠标的坐标

在这里插入图片描述
逻辑封装 useMousePosition.js

// 导入 ref, onMounted, onUnmounted
import { ref, onMounted, onUnmounted } from "vue";

function useMousePosition() {
  // 声明响应式变量 x,y
  let x = ref(0);
  let y = ref(0);

  function update(e) {
    // 事件的 pageX 即 x 坐标
    x.value = e.pageX;
    // 事件的 pageY 即 x 坐标
    y.value = e.pageY;
  }

  onMounted(() => {
    // 实例挂载完成时，添加对鼠标移动事件的监听 mousemove
    window.addEventListener("mousemove", update);
  });

  onUnmounted(() => {
    // 实例卸载完成时，移除对鼠标移动事件的监听 mousemove
    window.removeEventListener("mousemove", update);
  });

  // 返回 x,y
  return {
    x,
    y,
  };
}

// 默认导出函数 useMousePosition
export default useMousePosition;

页面使用 index.vue

<script setup>
import useMousePosition from "./useMousePosition";

let { x, y } = useMousePosition();
</script>

<template>
  <p>鼠标 x 坐标： {{ x }}</p>
  <p>鼠标 y 坐标： {{ y }}</p>
</template>