11

src/components/Canvas/FlowCanvas/flow-canvas.vue

@@ -64,7 +64,7 @@
 
 <script setup lang="ts">
 	import { VueFlow, useVueFlow } from '@vue-flow/core'
-	import { computed, ref, watch, onMounted, nextTick, provide, onBeforeMount } from 'vue'
+	import { computed, ref, watch, onMounted, nextTick, provide, onBeforeMount, onBeforeUnmount } from 'vue'
 	import { useLayout } from '@/utils/treeDiagram'
 	import { NODE_TYPE, NODE_COMPONENT } from './tools/index.d'
 	// 组件
@@ -252,7 +252,7 @@
 			})
 		}
 	})
-	onBeforeMount(() => {
+	onBeforeUnmount(() => {
 		stateManager.dispose()
 		eventManager.dispose()
 		flowManager.dispose()

src/components/Canvas/FlowCanvas/manager/EventManager.ts

@@ -7,6 +7,7 @@ export class EventManager {
 		this.stateManager = options.stateManager;
 		this.vueFlow = options.vueFlow
 		this.zoom = this.stateManager.zoom
+		this._handleKeyDown = this.handleKeyDown.bind(this)
 	}
 	/** 处理视口变化 */
 	handleViewportChange(e: any) {
@@ -53,6 +54,7 @@ export class EventManager {
 		this.stateManager.deleteNode(activeNodeID, { isElMessageBox: true })
 	}
 	/** 处理键盘事件 */
+	_handleKeyDown: any
 	handleKeyDown(event: any) {
 		const activeNodeID = this.stateManager.activeNodeID.value;
 		// const shiftKey
@@ -73,12 +75,12 @@ export class EventManager {
 	/** 注册事件 */
 	registerEvents() {
 		// document.addEventListener('copy', this.handleCopy.bind(this))
-		document.addEventListener('keydown', this.handleKeyDown.bind(this))
+		document.addEventListener('keydown', this._handleKeyDown)
 	}
 	/** 删除事件 */
 	removeEvents() {
 		// document.removeEventListener('copy', this.handleCopy.bind(this))
-		document.removeEventListener('keydown', this.handleKeyDown.bind(this))
+		document.removeEventListener('keydown', this._handleKeyDown)
 	}
 	dispose() {
 		this.removeEvents()