vue3+ts 自定义hooks操作,在页面上获取x,y轴坐标

ゞ浴缸里的玫瑰 2022-09-03 00:25 230阅读 0赞

## 创建项目： ##

1.  `vue create demo`
2.  选择：Default (Vue 3) (\[Vue 3\] babel, eslint)
3.  要把Typescript选择上  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_10_color_FFFFFF_t_70]
4.  选择3.x  
    ![在这里插入图片描述][da54f9a24bcb47988c12c294d4573058.png]

## 撸代码： ##

##### 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 }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1ajE5MzU_size_10_color_FFFFFF_t_70]: /images/20220829/adaa854ac05c4cbb99691f66b1a3720e.png
[da54f9a24bcb47988c12c294d4573058.png]: /images/20220829/7c812ad471c145a6897df9086a5cd34f.png