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 }