yueyixin
/
foreign-admin-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

导航

This commit is contained in:
杨 2026-05-09 14:20:36 +08:00
parent 7be9e85eae
commit 8621178127
1 changed files with 18 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/layout/Tabs.vue
View File

@ -1,29 +1,13 @@
<template>
<div class="tabs-container">
<el-tabs
v-model="tabsStore.activeTab"
type="card"
closable
@tab-click="handleTabClick"
@tab-remove="handleTabRemove"
>
<el-tab-pane
v-for="(tab, index) in tabsStore.tabs"
:key="tab.path"
:label="tab.title"
:name="tab.path"
>
<el-tabs v-model="tabsStore.activeTab" type="card" closable @tab-click="handleTabClick"
@tab-remove="handleTabRemove">
<el-tab-pane v-for="(tab, index) in tabsStore.tabs" :key="tab.path" :label="tab.title" :name="tab.path">
<template #label>
<div
class="tab-label"
:class="{ 'is-context-active': contextMenuPath === tab.path }"
draggable="true"
@dragstart="handleDragStart($event, index)"
@dragover.prevent="handleDragOver($event, index)"
@drop="handleDrop($event, index)"
@dragend="handleDragEnd"
@contextmenu.prevent="handleContextMenu($event, tab.path)"
>
<div class="tab-label" :class="{ 'is-context-active': contextMenuPath === tab.path }" draggable="true"
@dragstart="handleDragStart($event, index)" @dragover.prevent="handleDragOver($event, index)"
@drop="handleDrop($event, index)" @dragend="handleDragEnd"
@contextmenu.prevent="handleContextMenu($event, tab.path)">
<span class="tab-text">{{ tab.title }}</span>
</div>
</template>
@ -31,14 +15,8 @@
</el-tabs>
<!-- 右键菜单 -->
<el-dropdown
popper-class="el-droMenu"
:popper-style="style"
ref="contextMenuRef"
trigger="contextmenu"
@command="handleContextMenuCommand"
@visible-change="handleMenuVisibleChange"
>
<el-dropdown popper-class="el-droMenu" :popper-style="style" ref="contextMenuRef" trigger="contextmenu"
@command="handleContextMenuCommand" @visible-change="handleMenuVisibleChange">
<span class="context-menu-trigger"></span>
<template #dropdown>
<el-dropdown-menu>
@ -182,7 +160,7 @@ const handleContextMenu = (e: MouseEvent, path: string) => {
const menu = document.querySelector('.el-droMenu')
if (menu) {
style.value = `position: fixed; z-index: 9999; left: ${x}px; top: ${y}px;`
}
})
}
@ -241,6 +219,8 @@ const handleDrop = (e: DragEvent, index: number) => {
<style scoped lang="scss">
.tabs-container {
height: 50px;
box-sizing: content-box;
background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
border-bottom: 1px solid var(--el-border-color-light);
padding: 8px 20px 0;
@ -254,9 +234,13 @@ const handleDrop = (e: DragEvent, index: number) => {
border: none;
}
.el-tabs__nav-scroll {
overflow: visible !important;
}
.el-tabs__nav {
border: none !important;
gap: 8px;
gap: 4px;
}
.el-tabs__item {
@ -372,7 +356,7 @@ const handleDrop = (e: DragEvent, index: number) => {
.tab-text {
display: inline-block;
max-width: 150px;
overflow: hidden;
overflow: auto;
text-overflow: ellipsis;
white-space: nowrap;
}