From 0f51892d964dfdd64ef5f45312fd66fbb5383ef2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E4=BA=86=E4=B8=AA=E7=99=BD?= <543593352@qq.com>
Date: Thu, 26 Dec 2024 16:27:39 +0800
Subject: [PATCH] =?UTF-8?q?=E8=AF=BE=E5=A0=82=E5=B1=95=E7=A4=BA=EF=BC=9A?=
 =?UTF-8?q?=E7=99=BD=E6=9D=BFbug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/whiteboard/whiteboard.vue  | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/whiteboard/whiteboard.vue b/src/renderer/src/components/whiteboard/whiteboard.vue
index 7aabd4e..be3e274 100644
--- a/src/renderer/src/components/whiteboard/whiteboard.vue
+++ b/src/renderer/src/components/whiteboard/whiteboard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="whiteboart-container" :style="{ height: height + 'px' }">
-    <div class="canvasBox" ref="box"  @mouseleave="handleMouseLeave" ></div>
+    <div class="canvasBox" ref="box"  @mouseenter.capture="handleMouseEnter" @mouseleave.capture="handleMouseLeave"></div>
 
     <div class="footerLeft" @click.stop
       :style="type == 'design' ? ['top: 10px', 'justify-content: space-between'] : ['bottom: 10px', 'justify-content: center']">
@@ -278,7 +278,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref, getCurrentInstance, watch, toRaw, nextTick, computed, reactive, defineProps, defineEmits } from 'vue'
+import { onMounted, onBeforeUnmount, ref, getCurrentInstance, watch, toRaw, nextTick, computed, reactive, defineProps, defineEmits } from 'vue'
 import TinyWhiteboard from 'whiteboard_lyc'
 import ColorPicker from './components/ColorPicker.vue'
 import {
@@ -791,6 +791,25 @@ const init = () => {
   })
 }
 
+
+
+const isMyCanvas = ref(false); // 鼠标 是否进入画布判断
+const handleKeyDown=(event)=> {
+  // console.log('键盘按键被按下:', event.key);
+  // console.log(isMyCanvas.value,'??????????')
+  if(isMyCanvas.value == false){
+    event.stopPropagation();
+    // console.log('键盘事件被捕获，已阻止冒泡:', event.key);
+  }
+}
+/**
+ * 鼠标进入事件
+ */
+const handleMouseEnter = () => {
+  console.log('进入白板')
+  isMyCanvas.value = true;
+  document.addEventListener('keydown', handleKeyDown, true);
+}
 /**
  * 课堂展示-鼠标离开白板监听事件：该事件是避免，选中状态，在其他地方点击、后退、删除等事件，会删除白板内选中的元素
  */
@@ -798,7 +817,10 @@ const handleMouseLeave = () => {
   console.log('离开白板')
   // 清除激活项--点击事件的激活项
   app.cancelActiveElement()
-  // TODO 缺失点击拖动范围的取消激活项……
+  // 阻止 点击拖动范围的取消激活项……
+  isMyCanvas.value = false;
+  // 确保事件处理函数在组件挂载后绑定
+  document.addEventListener('keydown', handleKeyDown, true);
 };
 
 // 暴露方法