blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-05-21 00:09:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add scrollbar support and enhance tab navigation finish:1/2

Browse Source
This commit is contained in:
Vigo.zhou 2025-04-29 18:08:10 +08:00
parent 44ebd5f19e
commit 68ec342482
2 changed files with 43 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
eslint.config.js
View File

@ -18,5 +18,8 @@ export default antfu(
'vue/component-definition-name-casing': 'off', 'vue/component-definition-name-casing': 'off',
}, },
}, },
rules: {
'no-console': 'off',
},
}, },
) )

65
src/layouts/components/tab/TabBar.vue
View File

@ -2,6 +2,7 @@
import type { RouteLocationNormalized } from 'vue-router' import type { RouteLocationNormalized } from 'vue-router'
import { useAppStore, useTabStore } from '@/store' import { useAppStore, useTabStore } from '@/store'
import { useDraggable } from 'vue-draggable-plus' import { useDraggable } from 'vue-draggable-plus'
import type { NScrollbar } from 'naive-ui'
import IconClose from '~icons/icon-park-outline/close' import IconClose from '~icons/icon-park-outline/close'
import IconDelete from '~icons/icon-park-outline/delete-four' import IconDelete from '~icons/icon-park-outline/delete-four'
import IconFullwith from '~icons/icon-park-outline/fullwidth' import IconFullwith from '~icons/icon-park-outline/fullwidth'
@ -103,7 +104,19 @@ function onClickoutside() {
} }
const el = ref() const el = ref()
const scrollbar = ref<InstanceType<typeof NScrollbar>>()
function onWheel(e: WheelEvent) {
e.preventDefault()
if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
e.preventDefault()
console.log('dddwdadad', e.deltaY)
scrollbar.value?.scrollBy({
left: e.deltaY,
behavior: 'smooth',
})
}
}
useDraggable(el, tabs, { useDraggable(el, tabs, {
animation: 150, animation: 150,
ghostClass: 'ghost', ghostClass: 'ghost',
@ -111,32 +124,34 @@ useDraggable(el, tabs, {
</script> </script>
<template> <template>
<div class="p-l-2 flex w-full relative"> <n-scrollbar ref="scrollbar" :x-scrollable="true" @wheel="onWheel">
<div class="flex items-end"> <div class="p-l-2 flex w-full relative">
<TabBarItem <div class="flex items-end">
v-for="item in tabStore.pinTabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item" <TabBarItem
@click="handleTab(item)" v-for="item in tabStore.pinTabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item"
/> @click="handleTab(item)"
/>
</div>
<div ref="el" class="flex items-end flex-1">
<TabBarItem
v-for="item in tabStore.tabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item" closable
@close="tabStore.closeTab"
@click="handleTab(item)"
@contextmenu="handleContextMenu($event, item)"
/>
<n-dropdown
placement="bottom-start" trigger="manual" :x="x" :y="y" :options="options" :show="showDropdown"
:on-clickoutside="onClickoutside" @select="handleSelect"
/>
</div>
<!-- <span class="m-l-auto" /> -->
<n-el class="absolute right-0 flex items-center gap-1 bg-[var(--base-color)] h-full">
<Reload />
<ContentFullScreen />
<DropTabs />
</n-el>
</div> </div>
<div ref="el" class="flex items-end flex-1"> </n-scrollbar>
<TabBarItem
v-for="item in tabStore.tabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item" closable
@close="tabStore.closeTab"
@click="handleTab(item)"
@contextmenu="handleContextMenu($event, item)"
/>
<n-dropdown
placement="bottom-start" trigger="manual" :x="x" :y="y" :options="options" :show="showDropdown"
:on-clickoutside="onClickoutside" @select="handleSelect"
/>
</div>
<!-- <span class="m-l-auto" /> -->
<n-el class="absolute right-0 flex items-center gap-1 bg-[var(--base-color)] h-full">
<Reload />
<ContentFullScreen />
<DropTabs />
</n-el>
</div>
</template> </template>
<style scoped> <style scoped>