diff --git a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap b/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap index def5ff60b..65408799b 100644 --- a/packages/@core/preferences/__tests__/__snapshots__/config.test.ts.snap +++ b/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", diff --git a/packages/@core/preferences/src/config.ts b/packages/@core/preferences/src/config.ts index 2ee0deaff..589b7a13b 100644 --- a/packages/@core/preferences/src/config.ts +++ b/packages/@core/preferences/src/config.ts @@ -83,6 +83,7 @@ const defaultPreferences: Preferences = { showMaximize: true, showMore: true, styleType: 'chrome', + wheelable: true, }, theme: { builtinType: 'default', diff --git a/packages/@core/preferences/src/types.ts b/packages/@core/preferences/src/types.ts index 2b536b85a..3da5cd47a 100644 --- a/packages/@core/preferences/src/types.ts +++ b/packages/@core/preferences/src/types.ts @@ -173,6 +173,8 @@ interface TabbarPreferences { showMore: boolean; /** 标签页风格 */ styleType: TabsStyleType; + /** 是否开启鼠标滚轮响应 */ + wheelable: boolean; } interface ThemePreferences { diff --git a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue index 7656e489c..daf9f77d0 100644 --- a/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue +++ b/packages/@core/ui-kit/tabs-ui/src/tabs-view.vue @@ -19,6 +19,7 @@ const props = withDefaults(defineProps(), { contentClass: 'vben-tabs-content', draggable: true, styleType: 'chrome', + wheelable: true, }); const emit = defineEmits(); @@ -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); @@ -69,6 +79,7 @@ useTabsDrag(props, emit); shadow-left shadow-right @scroll-at="handleScrollAt" + @wheel="onWheel" > props.active, async () => { @@ -184,6 +191,7 @@ export function useTabsViewScroll(props: TabsProps) { return { handleScrollAt, + handleWheel, initScrollbar, scrollbarRef, scrollDirection, diff --git a/packages/effects/layouts/src/basic/tabbar/tabbar.vue b/packages/effects/layouts/src/basic/tabbar/tabbar.vue index f932364ed..06d8f0e50 100644 --- a/packages/effects/layouts/src/basic/tabbar/tabbar.vue +++ b/packages/effects/layouts/src/basic/tabbar/tabbar.vue @@ -55,6 +55,7 @@ if (!preferences.tabbar.persist) { :show-icon="showIcon" :style-type="preferences.tabbar.styleType" :tabs="currentTabs" + :wheelable="preferences.tabbar.wheelable" @close="handleClose" @sort-tabs="tabbarStore.sortTabs" @unpin="unpinTab" diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue b/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue index 5a3824a64..e613f5166 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue +++ b/packages/effects/layouts/src/widgets/preferences/blocks/layout/tabbar.vue @@ -18,6 +18,7 @@ const tabbarEnable = defineModel('tabbarEnable'); const tabbarShowIcon = defineModel('tabbarShowIcon'); const tabbarPersist = defineModel('tabbarPersist'); const tabbarDraggable = defineModel('tabbarDraggable'); +const tabbarWheelable = defineModel('tabbarWheelable'); const tabbarStyleType = defineModel('tabbarStyleType'); const tabbarShowMore = defineModel('tabbarShowMore'); const tabbarShowMaximize = defineModel('tabbarShowMaximize'); @@ -53,6 +54,13 @@ const styleItems = computed((): SelectOption[] => [ {{ $t('preferences.tabbar.draggable') }} + + {{ $t('preferences.tabbar.wheelable') }} + {{ $t('preferences.tabbar.icon') }} diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue b/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue index 8ca7dd654..93a9e6e8e 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue +++ b/packages/effects/layouts/src/widgets/preferences/blocks/switch-item.vue @@ -8,8 +8,9 @@ defineOptions({ name: 'PreferenceSwitchItem', }); -withDefaults(defineProps<{ disabled?: boolean }>(), { +withDefaults(defineProps<{ disabled?: boolean; tip?: string }>(), { disabled: false, + tip: '', }); const checked = defineModel(); @@ -32,11 +33,17 @@ function handleClick() { - + - + + + diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue index 77bf4d703..820cc8799 100644 --- a/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue +++ b/packages/effects/layouts/src/widgets/preferences/preferences-drawer.vue @@ -105,6 +105,7 @@ const tabbarShowMore = defineModel('tabbarShowMore'); const tabbarShowMaximize = defineModel('tabbarShowMaximize'); const tabbarPersist = defineModel('tabbarPersist'); const tabbarDraggable = defineModel('tabbarDraggable'); +const tabbarWheelable = defineModel('tabbarWheelable'); const tabbarStyleType = defineModel('tabbarStyleType'); const navigationStyleType = defineModel( @@ -345,6 +346,7 @@ async function handleReset() { v-model:tabbar-show-maximize="tabbarShowMaximize" v-model:tabbar-show-more="tabbarShowMore" v-model:tabbar-style-type="tabbarStyleType" + v-model:tabbar-wheelable="tabbarWheelable" /> diff --git a/packages/locales/src/langs/en-US/preferences.json b/packages/locales/src/langs/en-US/preferences.json index 8ba3cce62..108c8d8cd 100644 --- a/packages/locales/src/langs/en-US/preferences.json +++ b/packages/locales/src/langs/en-US/preferences.json @@ -55,6 +55,8 @@ "showMaximize": "Show Maximize Button", "persist": "Persist Tabs", "draggable": "Enable Draggable Sort", + "wheelable": "Support Mouse Wheel", + "wheelableTip": "When enabled, the Tabbar area responds to vertical scrolling events of the scroll wheel.", "styleType": { "title": "Tabs Style", "chrome": "Chrome", diff --git a/packages/locales/src/langs/zh-CN/preferences.json b/packages/locales/src/langs/zh-CN/preferences.json index 8f5038ee8..f99205f3b 100644 --- a/packages/locales/src/langs/zh-CN/preferences.json +++ b/packages/locales/src/langs/zh-CN/preferences.json @@ -55,6 +55,8 @@ "showMaximize": "显示最大化按钮", "persist": "持久化标签页", "draggable": "启动拖拽排序", + "wheelable": "启用纵向滚轮响应", + "wheelableTip": "开启后,标签栏区域可以响应滚轮的纵向滚动事件。\n关闭时,只能响应系统的横向滚动事件(需要按下Shift再滚动滚轮)", "styleType": { "title": "标签页风格", "chrome": "谷歌",