Vue3+Ts项目：基于Reactive的鼠标追踪开发
发布时间
阅读量：
阅读量
前言
今日将指导大家完成一个基于vue3与ts的简易示例，实现鼠标轨迹追踪功能。
接下来请查看下方的效果演示：
当用户在屏幕的任意位置进行点击操作时，系统将显示出对应点击位置的横纵坐标数值，接下来将具体说明该功能的实现方式。
实现过程概述
创建一个新的TS文件，随后着手编写该函数的具体实现内容：
TS：
import { ref, onMounted, onUnmounted } from 'vue'
function useMousePosition() {
const x = ref(0)
const y = ref(0)
const updateMouse = (e: MouseEvent) => {
x.value = e.pageX
y.value = e.pageY
}
onMounted(() => {
document.addEventListener('click', updateMouse)
})
onU全部评论 (0)
还没有任何评论哟~