마우스 따라오는 원

먼저 template를 작성해준다.

style은 변수로 지정해준다.

<template>
  <div class="circle" :style="circleStyle" />
</template>

 

다음으로 css를 작성해준다.

원하는 색에 원하는 크기로 작성해도 무방하다.

.circle {
  position: fixed;
  width: 20px;
  height: 20px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  pointer-events: none; /* 동그라미가 클릭을 막지 않도록 설정 */
}

 

마지막으로 script를 작성해준다.

먼저, 동그라미의 위치를 저장할 반응형 변수를 생성해준다.

const circleStyle = ref({
  top: '0px',
  left: '0px',
  transform: 'translate(-50%, -50%)',
})

 

다음으로 마우스를 움직이면 top과 left가 함께 움직이도록 해준다.

function handleMouseMove(event: MouseEvent) {
  circleStyle.value.top = `${event.clientY}px`
  circleStyle.value.left = `${event.clientX}px`
}

 

컴포넌트가 마운트되면 이벤트 리스너 추가되도록 해준다.

onMounted(() => {
  window.addEventListener('mousemove', handleMouseMove)
})

 

마찬가지로 컴포넌트가 언마운트되기 전에 이벤트 리스너 제거되도록 해준다.

onBeforeUnmount(() => {
  window.removeEventListener('mousemove', handleMouseMove)
})

 

이렇게 비교적 가벼운 컴포넌트를 생성해봤다!