vue3

vue3/project3/src/App.vue

@@ -20,7 +20,8 @@
     <Demo13></Demo13> -->
     <!-- <Demo25 :name="name1" :age="10"/>
     <Demo25 :list1="list"/> -->
-    <Demo26 />
+    <!-- <Demo26 /> -->
+    <Demo27></Demo27>
   </div>
 </template>
 
@@ -66,6 +67,7 @@ import Demo23 from './components/Demo23.vue';
 import Demo24 from './components/Demo24.vue';
 import Demo25 from './components/Demo25.vue';
 import Demo26 from './components/Demo26.vue';
+import Demo27 from './components/Demo27.vue';
 let isshow  = ref(true);
 let main = ref<any>(null);
 // onMounted(() => {

vue3/project3/src/components/Demo27.vue

@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <h1>自定义hooks</h1>
+    <p>鼠标位置:x轴:{{ x }},y轴{{ y }}</p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useMove} from '../hooks/useMove';
+console.log(useMove(),'你好')
+const {x,y} =useMove();
+</script>
+
+<style scoped>
+#box1 {
+  width: 400px;
+  height: 400px;
+  background: #00f;
+}
+#box2 {
+  width: 200px;
+  height: 200px;
+  background: #ff0;
+}
+</style>

vue3/project3/src/hooks/useMove.ts

@@ -0,0 +1,19 @@
+import { ref, onMounted,onUnmounted } from 'vue';
+export function useMove() {
+
+    let x = ref<number>(0);
+    let y = ref<number>(0);
+
+    function handleMove(event: MouseEvent): void {
+        console.log(event)
+        x.value = event.pageX;
+        y.value = event.pageY;
+    }
+    onMounted(() => {
+        window.addEventListener('mousemove', handleMove)
+    });
+    onUnmounted(()=>{
+        window.removeEventListener('mousemove', handleMove)
+    })
+    return {x,y}
+}