fix(tabs): 修复tabs溢出鼠标拖动tab不会滑动的问题

Author: handsomezyw

packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.scss

@@ -295,6 +295,7 @@ $devui-tab-slider-bg: $devui-list-item-hover-bg;
   padding-left: 0;
   overflow-y: hidden;
   overflow-x: scroll;
+  user-select: none;
   // 隐藏滚动条
   scrollbar-width: none;
   -ms-overflow-style: none;

packages/devui-vue/devui/tabs/src/components/tab-nav/tab-nav.tsx

@@ -5,6 +5,7 @@ import {
   onBeforeMount,
   onMounted,
   onUpdated,
+  onUnmounted,
   reactive,
   SetupContext,
   shallowRef,
@@ -33,9 +34,60 @@ export default defineComponent({
     const { update, beforeMount, mounted, activeClick, tabCanClose } = useTabNavFunction(props, tabs, tabsList, data, ctx, tabsEle);
     const { onTabRemove, onTabAdd } = useTabNavEvent(ctx);
 
+    // 添加新的tab选项
+    const handleTabAdd = () => {
+      onTabAdd();
+      nextTick(() => {
+        // 使每次添加新tab后，滚动条都在最右侧
+        if (tabsEle.value) {
+          tabsEle.value.scrollLeft = tabsEle.value.scrollWidth;
+        }
+      });
+    };
+
+    // 鼠标是否在滑动
+    let isSlide = false;
+    // tab滑动
+    const handleSlideTab = (mousedownEvent: MouseEvent) => {
+      if (tabsEle.value) {
+        // 鼠标按下x坐标
+        const mousedownX = mousedownEvent.clientX;
+        // 当前滚动条距离
+        const scrollLeft = tabsEle.value.scrollLeft;
+        isSlide = true;
+        // 监听鼠标滑动
+        tabsEle.value.addEventListener('mousemove', (mousemoveEvent: MouseEvent) => {
+          if (isSlide && tabsEle.value) {
+            // 当前鼠标移动x坐标
+            const mousemoveX = mousemoveEvent.clientX;
+            // 滑动距离
+            const scrollWidth = mousemoveX - mousedownX;
+            tabsEle.value.scrollLeft = scrollLeft - scrollWidth;
+          }
+        });
+        tabsEle.value.addEventListener('mouseup', () => {
+          isSlide = false;
+        });
+        tabsEle.value.addEventListener('mouseleave', () => {
+          isSlide = false;
+        });
+      }
+    };
+
     onUpdated(() => update());
     onBeforeMount(() => beforeMount());
-    onMounted(() => mounted());
+    onMounted(() => {
+      mounted();
+      // tab超出容器后监听滑动
+      if (tabsEle.value) {
+        tabsEle.value.addEventListener('mousedown', handleSlideTab);
+      }
+    });
+    onUnmounted(() => {
+      if (tabsEle.value) {
+        tabsEle.value.removeEventListener('mousedown', handleSlideTab);
+      }
+    });
 
     watch(
       () => props.modelValue,
@@ -47,16 +99,6 @@ export default defineComponent({
       }
     );
 
-    const handleTabAdd = () => {
-      onTabAdd();
-      nextTick(() => {
-        // 使每次添加新tab后，滚动条都在最右侧
-        if (tabsEle.value) {
-          tabsEle.value.scrollLeft = tabsEle.value.scrollWidth;
-        }
-      });
-    };
-
     return () => {
       const closeIconEl = (item: TabsStateData) => {
         return tabCanClose(item) ? (