feat: tabbar support mouse wheel vertical (#5129)

* feat: tabbar support mouse wheel

* docs: add tabbar wheelable tips

* chore: resolve vitest test

packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap

@@ -83,6 +83,7 @@ exports[`defaultPreferences immutability test > should not modify the config obj
     "showMaximize": true,
     "showMore": true,
     "styleType": "chrome",
+    "wheelable": true,
   },
   "theme": {
     "builtinType": "default",

packages/@core/preferences/src/config.ts

@@ -83,6 +83,7 @@ const defaultPreferences: Preferences = {
     showMaximize: true,
     showMore: true,
     styleType: 'chrome',
+    wheelable: true,
   },
   theme: {
     builtinType: 'default',

packages/@core/preferences/src/types.ts

@@ -173,6 +173,8 @@ interface TabbarPreferences {
   showMore: boolean;
   /** 标签页风格 */
   styleType: TabsStyleType;
+  /** 是否开启鼠标滚轮响应 */
+  wheelable: boolean;
 }
 
 interface ThemePreferences {

packages/@core/ui-kit/tabs-ui/src/tabs-view.vue

@@ -19,6 +19,7 @@ const props = withDefaults(defineProps<Props>(), {
   contentClass: 'vben-tabs-content',
   draggable: true,
   styleType: 'chrome',
+  wheelable: true,
 });
 
 const emit = defineEmits<TabsEmits>();
@@ -27,6 +28,7 @@ const forward = useForwardPropsEmits(props, emit);
 
 const {
   handleScrollAt,
+  handleWheel,
   scrollbarRef,
   scrollDirection,
   scrollIsAtLeft,
@@ -34,6 +36,14 @@ const {
   showScrollButton,
 } = useTabsViewScroll(props);
 
+function onWheel(e: WheelEvent) {
+  if (props.wheelable) {
+    handleWheel(e);
+    e.stopPropagation();
+    e.preventDefault();
+  }
+}
+
 useTabsDrag(props, emit);
 </script>
 
@@ -69,6 +79,7 @@ useTabsDrag(props, emit);
         shadow-left
         shadow-right
         @scroll-at="handleScrollAt"
+        @wheel="onWheel"
       >
         <TabsChrome
           v-if="styleType === 'chrome'"

packages/@core/ui-kit/tabs-ui/src/types.ts

@@ -33,7 +33,6 @@ export interface TabsProps {
    * 仅限 tabs-chrome
    */
   maxWidth?: number;
-
   /**
    * @zh_CN tab最小宽度
    * 仅限 tabs-chrome
@@ -44,15 +43,20 @@ export interface TabsProps {
    * @zh_CN 是否显示图标
    */
   showIcon?: boolean;
+
   /**
    * @zh_CN 标签页风格
    */
   styleType?: TabsStyleType;
-
   /**
    * @zh_CN 选项卡数据
    */
   tabs?: TabDefinition[];
+
+  /**
+   * @zh_CN 是否响应滚轮事件
+   */
+  wheelable?: boolean;
 }
 
 export interface TabConfig extends TabDefinition {

packages/@core/ui-kit/tabs-ui/src/use-tabs-view-scroll.ts

@@ -142,6 +142,13 @@ export function useTabsViewScroll(props: TabsProps) {
     scrollIsAtRight.value = right;
   }, 100);
 
+  function handleWheel({ deltaY }: WheelEvent) {
+    scrollViewportEl.value?.scrollBy({
+      behavior: 'smooth',
+      left: deltaY * 3,
+    });
+  }
+
   watch(
     () => props.active,
     async () => {
@@ -184,6 +191,7 @@ export function useTabsViewScroll(props: TabsProps) {
 
   return {
     handleScrollAt,
+    handleWheel,
     initScrollbar,
     scrollbarRef,
     scrollDirection,