Fix split layout tab cant scroll problem (#7)

imengyu · Oct 10, 2024 · 93bc8f3 · 93bc8f3
1 parent be4c608
commit 93bc8f3
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/library/Components/CodeLayoutScrollbar.vue b/library/Components/CodeLayoutScrollbar.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="code-layout-scrollbar">
+  <div class="code-layout-scrollbar" @wheel="mouseWheel">
     <div 
       ref="container" 
-      :class="'scroll-content ' + scroll"
+      :class="'scroll-content ' + scroll + ' ' + containerClass"
       @scroll="calcScrollBarPosition"
     >
       <slot />
@@ -56,6 +56,13 @@ const props = defineProps({
     type: Number,
     default: 8
   },
+  /**
+   * CSS class of inner container
+   */
+  containerClass: {
+    type: String,
+    default: ''
+  },
 })
 
 const container = ref<HTMLElement>();
@@ -139,6 +146,17 @@ function calcScroll(force = false) {
   lastCalcScrollScrollHeight = container.value.scrollHeight;
 }
 
+//只有横向滚动时，使鼠标可以直接滚动
+function mouseWheel(e: WheelEvent) {
+  if (props.scroll == 'horizontal') {
+    if (e.deltaMode == 0) {
+      container.value?.scrollTo({
+        left: container.value.scrollLeft + (e.deltaY > 0 ? 30 : -30),
+      });
+    }
+  }
+}
+
 //滚动条滚动处理
 let mouseDragDownThumbX = 0, mouseDragDownX = 0;
 let mouseDragDownThumbY = 0, mouseDragDownY = 0;
@@ -213,7 +231,8 @@ export interface CodeLayoutScrollbarInstance {
   getScrollContainer(): HTMLElement | undefined;
   /**
    * Scroll to position
-   * @param options 
+   * @param x X scroll pos (pixel)
+   * @param y Y scroll pos (pixel)
    */
   scrollTo(x: number, y: number): void;
   /**

diff --git a/library/Scss/Split.scss b/library/Scss/Split.scss
@@ -151,7 +151,6 @@
   justify-content: flex-start;
   position: relative;
   overflow: hidden;
-  overflow-x: scroll;
   height: var(--tab-height);
   background-color: var(--tab-border-color);
 
@@ -166,25 +165,21 @@
     z-index: 0;
     background-color: var(--tab-border-color);
   }
-  &::-webkit-scrollbar{
-    display: none;
-  }
 
   &.drag-active {
     background-color: var(--code-layout-color-background-hover);
   }
 
-  > .tabs {
+  .code-layout-split-tab-list-tabs {
     display: inline-flex;
     align-items: center;
+    justify-content: flex-start;
     flex-wrap: nowrap;
-    position: relative;
-    overflow: hidden;
+    overflow: scroll;
+    overflow-y: hidden;
     transition: all ease-in-out 0.25s;
-    height: 100%;
 
     .item {
-      flex: 1;
       position: relative;
       display: inline-flex;
       padding: 0px 10px;
@@ -307,7 +302,7 @@
       }    
     }
   }
-  > .extra {
+  .code-layout-split-tab-list-extra {
     display: flex;
     flex-grow: 1;
     flex-shrink: 0;

diff --git a/library/SplitLayout/SplitLayout.vue b/library/SplitLayout/SplitLayout.vue
@@ -16,6 +16,9 @@
           <template #tabHeaderExtraRender="params">
             <slot name="tabHeaderExtraRender" v-bind="params" />
           </template>
+          <template #tabHeaderEndRender="params">
+            <slot name="tabHeaderEndRender" v-bind="params" />
+          </template>
           <template #tabItemRender="params">
             <slot name="tabItemRender" v-bind="params" />
           </template>

diff --git a/library/SplitLayout/SplitTab.vue b/library/SplitLayout/SplitTab.vue
@@ -20,7 +20,7 @@
       @drop="handleTabHeaderDrop"
     >
       <slot name="tabHeaderRender">
-        <div class="tabs">
+        <CodeLayoutScrollbar scroll="horizontal" :scrollBarSize="4" containerClass="code-layout-split-tab-list-tabs">
           <slot
             v-for="(panel, index) in grid.children"
             :key="panel.name"
@@ -36,9 +36,10 @@
               @contextmenu="emit('tabItemContextMenu', panel, $event)"
             />
           </slot>
-        </div>
+          <slot name="tabHeaderEndRender" :grid="grid" />
+        </CodeLayoutScrollbar>
       </slot>
-      <div class="extra">
+      <div class="code-layout-split-tab-list-extra">
         <slot name="tabHeaderExtraRender" :grid="grid" />
         <CodeLayoutActionsRender v-if="grid.activePanel?.actions" :actions="grid.activePanel?.actions" />
       </div>
@@ -70,6 +71,7 @@ import type { CodeLayoutSplitLayoutContext, CodeLayoutSplitNGridInternal, CodeLa
 import SplitTabItem from './SplitTabItem.vue'
 import { getCurrentDragPanel, usePanelDragOverDetector } from '../Composeable/DragDrop';
 import CodeLayoutActionsRender from '../CodeLayoutActionsRender.vue';
+import CodeLayoutScrollbar from '../Components/CodeLayoutScrollbar.vue';
 
 const props = defineProps({
   grid: {