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

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

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