25 - 鼠标坐标

[gaoshunpeng]

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue"

// Implement ...
function useEventListener(target: EventTarget, event: string, callback: EventListenerOrEventListenerObject) {
  onMounted(() => target.addEventListener(event, callback))
  onUnmounted(() => target.removeEventListener(event, callback))
}

// Implement ...
function useMouse() {
  let x = ref(0)
  let y = ref(0)
  useEventListener(window, "mousemove", (event: MouseEvent) => {
    x.value = event.pageX;
    y.value = event.pageY;
  })
  return {x, y}
}
const { x, y } = useMouse()
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>