25 - 鼠标坐标

[kid1110]

// 你的答案
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';


// Implement ...
function useEventListener(target:EventTarget=window, 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", (e: MouseEvent) => {
    x.value = e.clientX
    y.value = e.clientY
  })
  return {x,y}
}
const { x, y } = useMouse()
</script>

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