Vue3 포인터 만들기 (Nuxt)

pointer

---

• ref
• @pointerup
• @pointerdown
• @pointermove

<template>
  <div
    class="divClass"
    @pointerup="clicked = false"
    @pointerdown="clicked = true"
    @pointermove="pointMove"
  >
    Click:{{ clicked }}
    <br />
    X:{{ xPoint }}
    <br />
    Y:{{ yPoint }}
  </div>
</template>

<script setup lang="ts">
let clicked = ref(false);
let xPoint = ref(0);
let yPoint = ref(0);
let pointMove = (e) => {
  xPoint.value = e.x;
  yPoint.value = e.y;
};
</script>

<style scoped>
.divClass {
  width: 100%;
  height: 100%;

  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
}
</style>