Demo：显示和移除滚动条时同时进行滚动条插件的注册和移除

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

@@ -94,7 +94,6 @@ MindMap.usePlugin(MiniMap)
   .usePlugin(TouchEvent)
   .usePlugin(SearchPlugin)
   .usePlugin(Painter)
-  .usePlugin(ScrollbarPlugin)
   .usePlugin(Formula)
 // .usePlugin(Cooperate)// 协同插件
 
@@ -145,6 +144,7 @@ export default {
     ...mapState({
       isZenMode: state => state.localConfig.isZenMode,
       openNodeRichText: state => state.localConfig.openNodeRichText,
+      isShowScrollbar: state => state.localConfig.isShowScrollbar,
       useLeftKeySelectionRightKeyDrag: state =>
         state.localConfig.useLeftKeySelectionRightKeyDrag,
       isShowScrollbar: state => state.localConfig.isShowScrollbar
@@ -157,6 +157,13 @@ export default {
       } else {
         this.removeRichTextPlugin()
       }
+    },
+    isShowScrollbar() {
+      if (this.isShowScrollbar) {
+        this.addScrollbarPlugin()
+      } else {
+        this.removeScrollbarPlugin()
+      }
     }
   },
   mounted() {
@@ -378,6 +385,7 @@ export default {
         // }
       })
       if (this.openNodeRichText) this.addRichTextPlugin()
+      if (this.isShowScrollbar) this.addScrollbarPlugin()
       this.mindMap.keyCommand.addShortcut('Control+s', () => {
         this.manualSave()
       })
@@ -525,6 +533,17 @@ export default {
       this.mindMap.removePlugin(RichText)
     },
 
+    // 加载滚动条插件
+    addScrollbarPlugin() {
+      if (!this.mindMap) return
+      this.mindMap.addPlugin(ScrollbarPlugin)
+    },
+
+    // 移除滚动条插件
+    removeScrollbarPlugin() {
+      this.mindMap.removePlugin(ScrollbarPlugin)
+    },
+
     // 测试动态插入节点
     testDynamicCreateNodes() {
       // return

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

@@ -61,6 +61,7 @@ export default {
   methods: {
     // 向插件传递滚动条宽高数据
     setScrollBarWrapSize() {
+      if (!this.mindMap.scrollbar) return
       const {
         width
       } = this.$refs.horizontalScrollbarRef.getBoundingClientRect()