vue3

17.Vue3/project/src/App.vue

@@ -28,6 +28,9 @@ export default {
 <template>
   <div>
     <h1>首页</h1>
+    <Demo18></Demo18>
+    <hr>
+    <hr>
     <Demo17></Demo17>
     <hr>
     <hr>
@@ -99,6 +102,7 @@ import Demo14 from './components/Demo14.vue';
 import Demo15 from './components/Demo15.vue';
 import Demo16 from './components/Demo16.vue';
 import Demo17 from './components/Demo17.vue';
+import Demo18 from './components/Demo18.vue';
 // export default {
 //   // components:{
 //   //   Demo1

17.Vue3/project/src/components/Demo18.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <h1>自定义hooks</h1>
+    <p>
+        鼠标x轴位置是:{{ x }}
+    </p>
+    <p>
+        鼠标y轴位置是:{{ y }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useMouse} from '../hooks/useMouse';
+console.log(useMouse());
+let {x,y} = useMouse();
+</script>
+
+<style lang="scss" scoped>
+</style>

17.Vue3/project/src/hooks/useMouse.ts

@@ -0,0 +1,15 @@
+// // 获取鼠标在页面中位置信息
+import { ref, onMounted } from "vue"
+let x = ref(0);
+let y = ref(0);
+export function useMouse() {
+    onMounted(() => {
+        window.addEventListener('mousemove', changeMouse)
+    })
+    function changeMouse(event: MouseEvent) {
+        // console.log(event, 'event')
+        x.value = event.clientX;
+        y.value = event.clientY;
+    }
+    return {x,y};
+}