25 - 鼠标坐标

[ExileEver]

<script setup lang="ts">
import { reactive, onMounted, onUnmounted, toRefs } from 'vue';

// Implement ...
function useEventListener(target, event, callback) {
  onMounted(() => {
    target.addEventListener(event, callback);
  });
  onUnmounted(() => {
    target.removeEventListener(event);
  });
}

// Implement ...
function useMouse() {
  const point = reactive({
    x: 0,
    y: 0,
  });
  useEventListener(window, 'mousemove', (e) => {
    (point.x = e.clientX), (point.y = e.clientY);
  });
  return toRefs(point);
}
const { x, y } = useMouse();
</script>

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