Demo:支持配置是否显示滚动条

web/src/lang/en_us.js

@@ -50,7 +50,8 @@ export default {
     rootStyle: 'Root Node',
     associativeLineText: 'Associative line text',
     fontFamily: 'Font family',
-    fontSize: 'Font size'
+    fontSize: 'Font size',
+    isShowScrollbar: 'Is show scrollbar'
   },
   color: {
     moreColor: 'More color'

web/src/lang/zh_cn.js

@@ -50,7 +50,8 @@ export default {
     rootStyle: '根节点',
     associativeLineText: '关联线文字',
     fontFamily: '字体',
-    fontSize: '字号'
+    fontSize: '字号',
+    isShowScrollbar: '是否显示滚动条'
   },
   color: {
     moreColor: '更多颜色'

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

@@ -753,6 +753,16 @@
           </el-select>
         </div>
       </div>
+      <!-- 是否显示滚动条 -->
+      <div class="row">
+        <div class="rowItem">
+          <el-checkbox
+            v-model="localConfigs.isShowScrollbar"
+            @change="updateLocalConfig('isShowScrollbar', $event)"
+            >{{ $t('baseStyle.isShowScrollbar') }}</el-checkbox
+          >
+        </div>
+      </div>
     </div>
   </Sidebar>
 </template>
@@ -848,7 +858,10 @@ export default {
         }
       },
       updateWatermarkTimer: null,
-      enableNodeRichText: true
+      enableNodeRichText: true,
+      localConfigs: {
+        isShowScrollbar: false
+      }
     }
   },
   computed: {
@@ -894,9 +907,7 @@ export default {
     }
   },
   created() {
-    this.enableNodeRichText = this.localConfig.openNodeRichText
-    this.mousewheelAction = this.localConfig.mousewheelAction
-    this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
+    this.initLoacalConfig()
     this.$bus.$on('setData', this.onSetData)
   },
   beforeDestroy() {
@@ -963,6 +974,18 @@ export default {
       })
     },
 
+    // 初始化本地配置
+    initLoacalConfig() {
+      this.enableNodeRichText = this.localConfig.openNodeRichText
+      this.mousewheelAction = this.localConfig.mousewheelAction
+      this.mousewheelZoomActionReverse = this.localConfig.mousewheelZoomActionReverse
+      ;[
+        'isShowScrollbar'
+      ].forEach(key => {
+        this.localConfigs[key] = this.localConfig[key]
+      })
+    },
+
     // 初始化水印配置
     initWatermark() {
       let config = this.mindMap.getConfig('watermarkConfig')
@@ -1038,11 +1061,7 @@ export default {
       }, 300)
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-07-03 22:08:12
-     * @Desc: 设置margin
-     */
+    // 设置margin
     updateMargin(type, value) {
       this.style[type] = value
       if (!this.data.theme.config[this.marginActiveTab]) {
@@ -1078,12 +1097,11 @@ export default {
       })
     },
 
-    // 切换鼠标滚轮的行为
-    mousewheelActionChange(e) {
+    // 本地配置
+    updateLocalConfig(key, value) {
       this.setLocalConfig({
-        mousewheelAction: e
+        [key]: value
       })
-      this.mindMap.updateConfig
     }
   }
 }

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

@@ -22,7 +22,7 @@
     <NodeIconSidebar v-if="mindMap" :mindMap="mindMap"></NodeIconSidebar>
     <NodeIconToolbar v-if="mindMap" :mindMap="mindMap"></NodeIconToolbar>
     <OutlineEdit v-if="mindMap" :mindMap="mindMap"></OutlineEdit>
-    <!-- <Scrollbar v-if="mindMap" :mindMap="mindMap"></Scrollbar> -->
+    <Scrollbar v-if="isShowScrollbar && mindMap" :mindMap="mindMap"></Scrollbar>
   </div>
 </template>
 
@@ -138,7 +138,8 @@ export default {
       isZenMode: state => state.localConfig.isZenMode,
       openNodeRichText: state => state.localConfig.openNodeRichText,
       useLeftKeySelectionRightKeyDrag: state =>
-        state.localConfig.useLeftKeySelectionRightKeyDrag
+        state.localConfig.useLeftKeySelectionRightKeyDrag,
+      isShowScrollbar: state => state.localConfig.isShowScrollbar
     })
   },
   watch: {

web/src/store.js

@@ -15,7 +15,9 @@ const store = new Vuex.Store({
       // 是否开启节点富文本
       openNodeRichText: true,
       // 鼠标行为
-      useLeftKeySelectionRightKeyDrag: false
+      useLeftKeySelectionRightKeyDrag: false,
+      // 是否显示滚动条
+      isShowScrollbar: false
     },
     activeSidebar: '', // 当前显示的侧边栏
     isDark: false,// 是否是暗黑模式