merge

src/component/tab/index.less

@@ -97,8 +97,6 @@
   border-bottom: 1px solid #eeeeee;
 }
 
-
-
 .layui-tab-title.is-right {
   border-left: 1px solid var(--global-neutral-color-3);
 }

src/component/tab/index.vue

@@ -29,6 +29,7 @@ import {
 } from "vue";
 import { useResizeObserver } from "@vueuse/core";
 import { TabData, TabInjectKey, TabPosition } from "./interface";
+import { isArrayChildren } from "../../utils";
 
 export interface TabProps {
   type?: string;
@@ -41,16 +42,15 @@ export interface TabProps {
 }
 
 const slot = useSlots();
-const childrens: Ref<VNode[]> = ref([]);
 const tabMap = reactive(new Map<number, TabData>());
+const childrens: Ref<VNode[]> = ref([]);
 
 const setItemInstanceBySlot = function (nodes: VNode[]) {
   nodes?.map((item) => {
-    let component = item.type as Component;
-    if (item.type.toString() == "Symbol(Fragment)") {
+    if (isArrayChildren(item, item.children)) {
       setItemInstanceBySlot(item.children as VNode[]);
     } else {
-      if (component.name == tabItem.name) {
+      if ((item.type as Component).name == tabItem.name) {
         childrens.value.push(item);
       }
     }
@@ -265,6 +265,24 @@ const update = () => {
   }
 };
 
+const horizontalScroll = (e: WheelEvent) => {
+  e.preventDefault();
+  const navSize = getNavSize();
+  const containerSize = navRef.value![`offset${sizeName.value}`];
+  const currentOffset = navOffset.value;
+  const scrollNextSize = scrollNextRef.value?.[`offset${sizeName.value}`] ?? 0;
+  const direction =
+    Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
+  const distance = 50 * (direction > 0 ? 1 : -1);
+  const newOffset = Math.max(currentOffset + distance, 0);
+  if (
+    navSize - currentOffset <= containerSize - scrollNextSize &&
+    direction > 0
+  )
+    return;
+  navOffset.value = newOffset;
+};
+
 const renderTabIcon = (attrs: Record<string, unknown>) => {
   const tab = attrs.tabData as TabData;
   if (typeof tab.icon === "function") {
@@ -293,7 +311,7 @@ useResizeObserver(navRef, update);
 
 watch(
   tabMap,
-  function () {
+  () => {
     childrens.value = [];
     setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
   },
@@ -335,6 +353,7 @@ provide("active", active);
     >
       <ul
         ref="navRef"
+        @wheel="horizontalScroll"
         :class="[
           'layui-tab-title',
           props.tabPosition ? `is-${tabPosition}` : '',