25 - 鼠标坐标

[FakerM]

<script setup lang="ts">
import { reactive, toRefs } from "vue";
// Implement ...
function useEventListener(target, event, callback) {
    target.addEventListener(event,(e) => {
      callback({
        x: e.pageX,
        y: e.pageY
      })
    })
}

// Implement ...
function useMouse() {
  const pointer = reactive({
    x: 0,
    y: 0
  })
  useEventListener(window, "mousemove", (res) => {
    pointer.x = res.x;
    pointer.y = res.y;
  })
  return toRefs(pointer);
}
const { x, y } = useMouse()
</script>

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