vue3+ts 自定義hooks操作,在頁面上擷取x,y軸坐标

vue3+ts 自定義hooks操作,在頁面上擷取x,y軸坐标

建立項目：

1. vue create demo

2. 選擇：Default (Vue 3) ([Vue 3] babel, eslint)
3. 要把Typescript選擇上

   

4. 選擇3.x

   

撸代碼：

HelloWorld.vue

路徑：src/components/HelloWorld.vue

<template>
   <div class="hello">
     <h2>自定義hook操作</h2>
     <h2>x:{{ x }} ，y:{{ y }}</h2>
   </div>
</template>
  
<script lang="ts">
import { defineComponent } from 'vue';
import { userMousePosition} from '../hooks/userMousePosition';

export default defineComponent({
  name: 'HelloWorld',
  setup() {
    const { x, y } = userMousePosition(); // 擷取x,y軸坐标
    return { x, y, }
  }
});
</script>
  
           

userMousePosition.ts

路徑：src/hooks/userMousePosition.ts

import { defineComponent, onBeforeUnmount, onMounted, ref } from 'vue';
const userMousePosition = function () {
  const x = ref(-1);
  const y = ref(-1);
  const clickHandler = (event: MouseEvent) => {
    x.value = event.pageX;
    y.value = event.pageY;
    console.log(x.value, y.value);
  };
  // 頁面加載的時候監聽點選事件
  onMounted(() => {
    window.addEventListener('click', clickHandler)
  })
  // 頁面離開的時候删除監聽
  onBeforeUnmount(() => {
    window.removeEventListener('click', clickHandler)
  })
  return { x, y }
}

export { userMousePosition }