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 }