Demo：组件卸载时解除绑定的事件

web/src/pages/Edit/components/Edit.vue

@@ -72,8 +72,7 @@ import OutlineEdit from './OutlineEdit.vue'
 import { showLoading, hideLoading } from '@/utils/loading'
 
 // 注册插件
-MindMap
+MindMap.usePlugin(MiniMap)
-  .usePlugin(MiniMap)
   .usePlugin(Watermark)
   .usePlugin(Drag)
   .usePlugin(KeyboardNavigation)
@@ -88,7 +87,7 @@ MindMap
   .usePlugin(Painter)
 
 // 注册自定义主题
-customThemeList.forEach((item) => {
+customThemeList.forEach(item => {
   MindMap.defineTheme(item.value, item.theme)
 })
 
@@ -132,7 +131,8 @@ export default {
     ...mapState({
       isZenMode: state => state.localConfig.isZenMode,
       openNodeRichText: state => state.localConfig.openNodeRichText,
-      useLeftKeySelectionRightKeyDrag: state => state.localConfig.useLeftKeySelectionRightKeyDrag,
+      useLeftKeySelectionRightKeyDrag: state =>
+        state.localConfig.useLeftKeySelectionRightKeyDrag
     })
   },
   watch: {
@@ -153,25 +153,48 @@ export default {
     this.$bus.$on('paddingChange', this.onPaddingChange)
     this.$bus.$on('export', this.export)
     this.$bus.$on('setData', this.setData)
-    this.$bus.$on('startTextEdit', () => {
+    this.$bus.$on('startTextEdit', this.handleStartTextEdit)
-      this.mindMap.renderer.startTextEdit()
+    this.$bus.$on('endTextEdit', this.handleEndTextEdit)
-    })
+    this.$bus.$on('createAssociativeLine', this.handleCreateLineFromActiveNode)
-    this.$bus.$on('endTextEdit', () => {
+    this.$bus.$on('startPainter', this.handleStartPainter)
-      this.mindMap.renderer.endTextEdit()
-    })
-    this.$bus.$on('createAssociativeLine', () => {
-      this.mindMap.associativeLine.createLineFromActiveNode()
-    })
-    this.$bus.$on('startPainter', () => {
-      this.mindMap.painter.startPainter()
-    })
     this.$bus.$on('node_tree_render_end', this.handleHideLoading)
     this.$bus.$on('showLoading', this.handleShowLoading)
-    window.addEventListener('resize', () => {
+    window.addEventListener('resize', this.handleResize)
-      this.mindMap.resize()
+  },
-    })
+  beforeDestroy() {
+    this.$bus.$off('execCommand', this.execCommand)
+    this.$bus.$off('paddingChange', this.onPaddingChange)
+    this.$bus.$off('export', this.export)
+    this.$bus.$off('setData', this.setData)
+    this.$bus.$off('startTextEdit', this.handleStartTextEdit)
+    this.$bus.$off('endTextEdit', this.handleEndTextEdit)
+    this.$bus.$off('createAssociativeLine', this.handleCreateLineFromActiveNode)
+    this.$bus.$off('startPainter', this.handleStartPainter)
+    this.$bus.$off('node_tree_render_end', this.handleHideLoading)
+    this.$bus.$off('showLoading', this.handleShowLoading)
+    window.removeEventListener('resize', this.handleResize)
   },
   methods: {
+    handleStartTextEdit() {
+      this.mindMap.renderer.startTextEdit()
+    },
+
+    handleEndTextEdit() {
+      this.mindMap.renderer.endTextEdit()
+    },
+
+    handleCreateLineFromActiveNode() {
+      this.mindMap.associativeLine.createLineFromActiveNode()
+    },
+
+    handleStartPainter() {
+      this.mindMap.painter.startPainter()
+    },
+
+    handleResize() {
+      this.mindMap.resize()
+    },
+
     // 显示loading
     handleShowLoading() {
       this.enableShowLoading = true
@@ -252,7 +275,7 @@ export default {
         ...(config || {}),
         iconList: icon,
         useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag,
-        customInnerElsAppendTo: null,
+        customInnerElsAppendTo: null
         // isUseCustomNodeContent: true,
         // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西
         // customCreateNodeContent: (node) => {

web/src/pages/Edit/components/Export.vue

@@ -24,7 +24,10 @@
           >{{ $t('export.include') }}</el-checkbox
         >
       </div>
-      <div class="paddingInputBox" v-show="['svg', 'png', 'pdf'].includes(exportType)">
+      <div
+        class="paddingInputBox"
+        v-show="['svg', 'png', 'pdf'].includes(exportType)"
+      >
         <span class="name">{{ $t('export.paddingX') }}</span>
         <el-input
           style="width: 100px"
@@ -32,7 +35,9 @@
           size="mini"
           @change="onPaddingChange"
         ></el-input>
-        <span class="name" style="margin-left: 10px;">{{ $t('export.paddingY') }}</span>
+        <span class="name" style="margin-left: 10px;">{{
+          $t('export.paddingY')
+        }}</span>
         <el-input
           style="width: 100px"
           v-model="paddingY"
@@ -104,14 +109,19 @@ export default {
 
     downTypeList() {
       return downTypeList[this.$i18n.locale] || downTypeList.zh
-    },
+    }
   },
   created() {
-    this.$bus.$on('showExport', () => {
+    this.$bus.$on('showExport', this.handleShowExport)
-      this.dialogVisible = true
+  },
-    })
+  beforeDestroy() {
+    this.$bus.$off('showExport', this.handleShowExport)
   },
   methods: {
+    handleShowExport() {
+      this.dialogVisible = true
+    },
+
     onPaddingChange() {
       this.$bus.$emit('paddingChange', {
         exportPaddingX: Number(this.paddingX),
@@ -163,12 +173,7 @@ export default {
           this.isTransparent
         )
       } else {
-        this.$bus.$emit(
+        this.$bus.$emit('export', this.exportType, true, this.fileName)
-          'export',
-          this.exportType,
-          true,
-          this.fileName
-        )
       }
       this.$notify.info({
         title: this.$t('export.notifyTitle'),
@@ -189,7 +194,7 @@ export default {
 
         .info {
           .name {
-            color: hsla(0,0%,100%,.9);
+            color: hsla(0, 0%, 100%, 0.9);
           }
         }
       }
@@ -222,7 +227,7 @@ export default {
     margin-top: 10px;
 
     &.warning {
-      color: #F56C6C;
+      color: #f56c6c;
     }
   }
 
@@ -236,7 +241,7 @@ export default {
       overflow: hidden;
       margin: 10px;
       border-radius: 11px;
-      box-shadow: 0 0 20px 0 rgba(0,0,0,.02);
+      box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.02);
       background-color: #fff;
       display: flex;
       align-items: center;

web/src/pages/Edit/components/Import.vue

@@ -58,11 +58,16 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('showImport', () => {
+    this.$bus.$on('showImport', this.handleShowImport)
-      this.dialogVisible = true
+  },
-    })
+  beforeDestroy() {
+    this.$bus.$off('showImport', this.handleShowImport)
   },
   methods: {
+    handleShowImport() {
+      this.dialogVisible = true
+    },
+
     /**
      * @Author: 王林
      * @Date: 2021-08-03 22:48:42

web/src/pages/Edit/components/NodeHyperlink.vue

@@ -44,7 +44,15 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('node_active', (...args) => {
+    this.$bus.$on('node_active', this.handleNodeActive)
+    this.$bus.$on('showNodeLink', this.handleShowNodeLink)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.handleNodeActive)
+    this.$bus.$off('showNodeLink', this.handleShowNodeLink)
+  },
+  methods: {
+    handleNodeActive(...args) {
       this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
         let firstNode = this.activeNodes[0]
@@ -54,14 +62,14 @@ export default {
         this.link = ''
         this.linkTitle = ''
       }
-    })
+    },
-    this.$bus.$on('showNodeLink', () => {
+
+    handleShowNodeLink() {
       this.activeNodes[0].mindMap.keyCommand.pause()
       this.$bus.$emit('startTextEdit')
       this.dialogVisible = true
-    })
     },
-  methods: {
+
     /**
      * @Author: 王林
      * @Date: 2021-06-22 22:08:11

web/src/pages/Edit/components/NodeIcon.vue

@@ -43,7 +43,15 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('node_active', (...args) => {
+    this.$bus.$on('node_active', this.handleNodeActive)
+    this.$bus.$on('showNodeIcon', this.handleShowNodeIcon)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.handleNodeActive)
+    this.$bus.$off('showNodeIcon', this.handleShowNodeIcon)
+  },
+  methods: {
+    handleNodeActive(...args) {
       this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
         let firstNode = this.activeNodes[0]
@@ -51,12 +59,12 @@ export default {
       } else {
         this.iconList = []
       }
-    })
-    this.$bus.$on('showNodeIcon', () => {
-      this.dialogVisible = true
-    })
     },
-  methods: {
+
+    handleShowNodeIcon() {
+      this.dialogVisible = true
+    },
+
     getHtml(icon) {
       return /^<svg/.test(icon) ? icon : `<img src="${icon}" />`
     },

web/src/pages/Edit/components/NodeIconSidebar.vue

@@ -11,9 +11,16 @@
           <div class="item" v-for="item in nodeIconList" :key="item.name">
             <div class="title">{{ item.name }}</div>
             <div class="list">
-                            <div class="icon" v-for="icon in item.list" :key="icon.name" v-html="getHtml(icon.icon)" :class="{
+              <div
+                class="icon"
+                v-for="icon in item.list"
+                :key="icon.name"
+                v-html="getHtml(icon.icon)"
+                :class="{
                   selected: iconList.includes(item.type + '_' + icon.name)
-                            }" @click="setIcon(item.type, icon.name)"></div>
+                }"
+                @click="setIcon(item.type, icon.name)"
+              ></div>
             </div>
           </div>
         </div>
@@ -22,10 +29,16 @@
           <div class="item" v-for="item in nodeImageList" :key="item.name">
             <div class="title">{{ item.name }}</div>
             <div class="list">
-                            <div class="icon" v-for="image in item.list" :key="image.url" :class="{
+              <div
+                class="icon"
+                v-for="image in item.list"
+                :key="image.url"
+                :class="{
                   selected: nodeImage === image.url
-                            }" @click="setImage(image)">
+                }"
-                                <img :src="image.url" alt="">
+                @click="setImage(image)"
+              >
+                <img :src="image.url" alt="" />
               </div>
             </div>
           </div>
@@ -58,7 +71,7 @@ export default {
     }
   },
   computed: {
-        ...mapState(['activeSidebar', 'isDark']),
+    ...mapState(['activeSidebar', 'isDark'])
   },
   watch: {
     activeSidebar(val) {
@@ -70,7 +83,15 @@ export default {
     }
   },
   created() {
-        this.$bus.$on('node_active', (...args) => {
+    this.$bus.$on('node_active', this.handleNodeActive)
+    this.$bus.$on('showNodeIcon', this.handleShowNodeIcon)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.handleNodeActive)
+    this.$bus.$off('showNodeIcon', this.handleShowNodeIcon)
+  },
+  methods: {
+    handleNodeActive(...args) {
       this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
         let firstNode = this.activeNodes[0]
@@ -80,12 +101,12 @@ export default {
         this.iconList = []
         this.nodeImage = ''
       }
-        })
-        this.$bus.$on('showNodeIcon', () => {
-            this.dialogVisible = true
-        })
     },
-    methods: {
+
+    handleShowNodeIcon() {
+      this.dialogVisible = true
+    },
+
     // 获取图标渲染方式
     getHtml(icon) {
       return /^<svg/.test(icon) ? icon : `<img src="${icon}" />`
@@ -114,7 +135,6 @@ export default {
       }
       this.activeNodes.forEach(node => {
         node.setIcon([...this.iconList])
-
       })
     },
 
@@ -126,7 +146,6 @@ export default {
           ...image
         })
       })
-
     }
   }
 }
@@ -140,8 +159,6 @@ export default {
     .title {
       color: #fff;
     }
-
-
   }
 
   .title {
@@ -237,10 +254,8 @@ export default {
             }
           }
         }
-
       }
     }
   }
 }
 </style>
-  

web/src/pages/Edit/components/NodeImage.vue

@@ -6,11 +6,19 @@
     width="500"
   >
     <div class="title">方式一</div>
-    <ImgUpload ref="ImgUpload" v-model="img" style="margin-bottom: 12px;"></ImgUpload>
+    <ImgUpload
+      ref="ImgUpload"
+      v-model="img"
+      style="margin-bottom: 12px;"
+    ></ImgUpload>
     <div class="title">方式二</div>
     <div class="inputBox">
       <span class="label">请输入图片地址</span>
-      <el-input v-model="imgUrl" size="mini" placeholder="http://xxx.com/xx.jpg"></el-input>
+      <el-input
+        v-model="imgUrl"
+        size="mini"
+        placeholder="http://xxx.com/xx.jpg"
+      ></el-input>
     </div>
     <div class="title">可选</div>
     <div class="inputBox">
@@ -50,10 +58,19 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('node_active', (...args) => {
+    this.$bus.$on('node_active', this.handleNodeActive)
+    this.$bus.$on('showNodeImage', this.handleShowNodeImage)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.handleNodeActive)
+    this.$bus.$off('showNodeImage', this.handleShowNodeImage)
+  },
+  methods: {
+    handleNodeActive(...args) {
       this.activeNodes = args[1]
-    })
+    },
-    this.$bus.$on('showNodeImage', () => {
+
+    handleShowNodeImage() {
       this.reset()
       if (this.activeNodes.length > 0) {
         let firstNode = this.activeNodes[0]
@@ -68,9 +85,8 @@ export default {
         this.imgTitle = firstNode.getData('imageTitle')
       }
       this.dialogVisible = true
-    })
     },
-  methods: {
+
     cancel() {
       this.dialogVisible = false
       this.reset()

web/src/pages/Edit/components/NodeNote.vue

@@ -43,7 +43,15 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('node_active', (...args) => {
+    this.$bus.$on('node_active', this.handleNodeActive)
+    this.$bus.$on('showNodeNote', this.handleShowNodeNote)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.handleNodeActive)
+    this.$bus.$off('showNodeNote', this.handleShowNodeNote)
+  },
+  methods: {
+    handleNodeActive(...args) {
       this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
         let firstNode = this.activeNodes[0]
@@ -51,16 +59,16 @@ export default {
       } else {
         this.note = ''
       }
-    })
+    },
-    this.$bus.$on('showNodeNote', () => {
+
+    handleShowNodeNote() {
       this.$bus.$emit('startTextEdit')
       this.dialogVisible = true
       this.$nextTick(() => {
         this.initEditor()
       })
-    })
     },
-  methods: {
+
     /**
      * @Author: 王林25
      * @Date: 2022-05-09 11:37:05

web/src/pages/Edit/components/NodeTag.vue

@@ -59,7 +59,15 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('node_active', (...args) => {
+    this.$bus.$on('node_active', this.handleNodeActive)
+    this.$bus.$on('showNodeTag', this.handleShowNodeTag)
+  },
+  beforeDestroy() {
+    this.$bus.$off('node_active', this.handleNodeActive)
+    this.$bus.$off('showNodeTag', this.handleShowNodeTag)
+  },
+  methods: {
+    handleNodeActive(...args) {
       this.activeNodes = args[1]
       if (this.activeNodes.length > 0) {
         let firstNode = this.activeNodes[0]
@@ -68,13 +76,13 @@ export default {
         this.tagArr = []
         this.tag = ''
       }
-    })
+    },
-    this.$bus.$on('showNodeTag', () => {
+
+    handleShowNodeTag() {
       this.$bus.$emit('startTextEdit')
       this.dialogVisible = true
-    })
     },
-  methods: {
+
     /**
      * @Author: 王林
      * @Date: 2021-06-24 21:48:14

web/src/pages/Edit/components/Outline.vue

@@ -73,7 +73,19 @@ export default {
   },
   created() {
     window.addEventListener('keydown', this.onKeyDown)
-    this.$bus.$on('data_change', () => {
+    this.$bus.$on('data_change', this.handleDataChange)
+    this.$bus.$on('node_tree_render_end', this.handleNodeTreeRenderEnd)
+  },
+  mounted() {
+    this.refresh()
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.onKeyDown)
+    this.$bus.$off('data_change', this.handleDataChange)
+    this.$bus.$off('node_tree_render_end', this.handleNodeTreeRenderEnd)
+  },
+  methods: {
+    handleDataChange() {
       // 在大纲里操作节点时不要响应该事件，否则会重新刷新树
       if (this.notHandleDataChange) {
         this.notHandleDataChange = false
@@ -84,8 +96,9 @@ export default {
         return
       }
       this.refresh()
-    })
+    },
-    this.$bus.$on('node_tree_render_end', () => {
+
+    handleNodeTreeRenderEnd() {
       // 当前存在未完成的节点插入操作
       if (this.insertType) {
         this[this.insertType]()
@@ -100,15 +113,8 @@ export default {
           this.afterCreateNewNode()
         })
       }
-    })
     },
-  mounted() {
+
-    this.refresh()
-  },
-  beforeDestroy() {
-    window.removeEventListener('keydown', this.onKeyDown)
-  },
-  methods: {
     // 刷新树数据
     refresh() {
       let data = this.mindMap.getData()
@@ -332,7 +338,8 @@ export default {
       }
     }
 
-    /deep/ .el-tree-node__content:hover, .el-upload-list__item:hover {
+    /deep/ .el-tree-node__content:hover,
+    .el-upload-list__item:hover {
       background-color: hsla(0, 0%, 100%, 0.02) !important;
     }
 

web/src/pages/Edit/components/Search.vue

@@ -89,16 +89,23 @@ export default {
   },
   created() {
     this.$bus.$on('show_search', this.showSearch)
-    this.mindMap.on('search_info_change', data => {
+    this.mindMap.on('search_info_change', this.handleSearchInfoChange)
-      this.currentIndex = data.currentIndex + 1
-      this.total = data.total
-      this.showSearchInfo = true
-    })
     this.mindMap.keyCommand.addShortcut('Control+f', this.showSearch)
   },
+  beforeDestroy() {
+    this.$bus.$off('show_search', this.showSearch)
+    this.mindMap.off('search_info_change', this.handleSearchInfoChange)
+    this.mindMap.keyCommand.removeShortcut('Control+f', this.showSearch)
+  },
   methods: {
     isUndef,
 
+    handleSearchInfoChange(data) {
+      this.currentIndex = data.currentIndex + 1
+      this.total = data.total
+      this.showSearchInfo = true
+    },
+
     showSearch() {
       this.$bus.$emit('closeSideBar')
       this.show = true

web/src/pages/Edit/components/Sidebar.vue

@@ -49,13 +49,18 @@ export default {
     }
   },
   created() {
-    this.$bus.$on('closeSideBar', () => {
+    this.$bus.$on('closeSideBar', this.handleCloseSidebar)
-      this.close()
+  },
-    })
+  beforeDestroy() {
+    this.$bus.$off('closeSideBar', this.handleCloseSidebar)
   },
   methods: {
     ...mapMutations(['setActiveSidebar']),
 
+    handleCloseSidebar() {
+      this.close()
+    },
+
     close() {
       this.show = false
       this.setActiveSidebar('')

web/src/pages/Edit/components/Theme.vue

@@ -81,15 +81,19 @@ export default {
     this.initGroup()
     this.theme = this.mindMap.getTheme()
     this.handleDark()
-
+    this.mindMap.on('view_theme_change', this.handleViewThemeChange)
-    this.mindMap.on('view_theme_change', () => {
+  },
-      this.theme = this.mindMap.getTheme()
+  beforeDestroy() {
-      this.handleDark()
+    this.mindMap.off('view_theme_change', this.handleViewThemeChange)
-    })
   },
   methods: {
     ...mapMutations(['setIsDark']),
 
+    handleViewThemeChange() {
+      this.theme = this.mindMap.getTheme()
+      this.handleDark()
+    },
+
     initGroup() {
       let baiduThemes = [
         'default',

web/src/pages/Edit/components/Toolbar.vue

@@ -247,7 +247,7 @@ export default {
     this.$bus.$off('node_active', this.onNodeActive)
     this.$bus.$off('back_forward', this.onBackForward)
     this.$bus.$off('write_local_file', this.onWriteLocalFile)
-    this.$bus.$on('painter_start', this.onPainterStart)
+    this.$bus.$off('painter_start', this.onPainterStart)
     this.$bus.$off('painter_end', this.onPainterEnd)
   },
   methods: {