vue3

16.vue3/project1/src/App.vue

@@ -2,7 +2,8 @@
   <div>
     <hr />
     <hr />
-    <Demo14 :news="person"></Demo14>
+    <Demo15></Demo15>
+    <!-- <Demo14 :news="person"></Demo14> -->
     <!-- <Demo13 v-if="show"></Demo13> -->
     <!-- <Demo12 ref="main"></Demo12>
     <button @click="getMain">展示</button> -->
@@ -46,7 +47,8 @@ import { ref, reactive } from "vue";
 // import Demo11 from "./components/Demo11.vue";
 // import Demo12 from "./components/Demo12.vue";
 // import Demo13 from "./components/Demo13.vue";
-import Demo14 from "./components/Demo14.vue";
+// import Demo14 from "./components/Demo14.vue";
+import Demo15 from "./components/Demo15.vue";
 
 interface x {
   name: string;

16.vue3/project1/src/components/Demo15.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h1>Demo15</h1>
+    <h1>x: {{ x }}--y: {{ y }}</h1>
+    <!-- <input type="text" @keydown="handleMain" /> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useMouse } from "@/hooks/useMouse";
+let { x, y } = useMouse();
+// const handleMain = (e: Event) => {
+//   console.log(e);
+// };
+</script>
+
+<style lang="scss" scoped>
+</style>

16.vue3/project1/src/hooks/useMouse.ts

@@ -0,0 +1,19 @@
+
+import { ref, reactive, onMounted, onUnmounted } from "vue";
+
+export function useMouse() {
+
+    let x = ref<number>(0);
+    let y = ref<number>(0);
+    onMounted(() => {
+        window.addEventListener("mousemove", changeMouse);
+    });
+    const changeMouse = (event: MouseEvent): void => {
+        x.value = event.clientX;
+        y.value = event.clientY;
+    };
+    onUnmounted(() => {
+        window.removeEventListener("mousemove", changeMouse);
+    });
+    return { x, y }
+}