25 - useMouse

[kai-phan]

<script setup lang="ts">

import { reactive } from 'vue';
import { toRefs } from 'vue';
import { onUnmounted } from 'vue';
import { onMounted } from 'vue';

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

  onUnmounted(() => {
    target.removeEventListener(event, callback);
  })
}

// Implement ...
function useMouse() {
  const position = reactive({ x: 0, y: 0 })

  useEventListener(window, "mousemove", (e) => {
    position.x = e.clientX;
    position.y = e.clientY;
  });

  return toRefs(position)
}
const { x, y } = useMouse()
</script>

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