创建文件夹
在src下创建文件夹。文件名称为hooks。
hooks下的文件夹下，是你的封装的hook；
通过命名为useXXXXXX
usexy.js 文件是封装的获取屏幕的坐标
import { onBeforeUnmount, onMounted, ref } from "vue"; export default function () { let x = ref("0") let y = ref("0") // 如果这个文件是ts， e的类型应该是 MouseEvent let pageHander=function(e){ console.log(e) x.value=e.pageX; y.value=e.pageY; } // 需要使用生命周期函数，页面加载完成 onMounted(()=>{ window.addEventListener("click",pageHander) }) // 在页面即将卸载时，移除事件的监听 onBeforeUnmount(()=>{ window.removeEventListener("click",pageHander ) }) return {x,y} }
使用的页面
<template> <div> <p>横坐标{{x}}</p> <p>纵坐标{{y}}</p> </div> </template> <script> import getxy from "../src/hooks/usexy.js" export default { name: "App", setup() { let {x,y}=getxy() return {x,y} } }; </script>
也许大家会觉得这里的hooks。
跟我写一个封装的函数，没有什么区别；
这里来看确实是没有什么太大的区别。
