JLNTV_IPD/vue-admin-beautiful
4
0
Fork 0
mirror of https://gitee.com/chu1204505056/vue-admin-beautiful.git synced 2025-06-03 08:19:15 +08:00
Code Issues Projects Releases Wiki Activity

✨多标签页适配手机端

Browse Source
This commit is contained in:
chuzhixin 2020-10-06 00:25:04 +08:00
parent f2dd815dc1
commit 64c03fd686
1 changed files with 53 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
src/layout/vab-tabs/index.vue
View File

@ -1,47 +1,45 @@
<template>
<div class="vab-tabs">
<a-row type="flex">
<a-col flex="auto">
<a-tabs
@tab-click="handleTabClick"
@edit="handleTabRemove"
v-model:activeKey="tabActive"
hide-add
type="editable-card"
>
<a-tab-pane
v-for="item in visitedRoutes"
:key="item.fullPath"
:closable="!isAffix(item)"
:tab="item.meta.title"
></a-tab-pane>
</a-tabs>
</a-col>
<a-col flex="88px">
<a-dropdown>
<template v-slot:overlay>
<a-menu @click="handleClick">
<a-menu-item key="closeOthersTabs">
<a>关闭其他</a>
</a-menu-item>
<a-menu-item key="closeLeftTabs">
<a>关闭左侧</a>
</a-menu-item>
<a-menu-item key="closeRightTabs">
<a>关闭右侧</a>
</a-menu-item>
<a-menu-item key="closeAllTabs">
<a>关闭全部</a>
</a-menu-item>
</a-menu>
</template>
<a-button style="margin-left: 8px">
更多
<DownOutlined />
</a-button>
</a-dropdown>
</a-col>
</a-row>
<div class="vab-tabs-left-panel">
<a-tabs
@tab-click="handleTabClick"
@edit="handleTabRemove"
v-model:activeKey="tabActive"
hide-add
type="editable-card"
>
<a-tab-pane
v-for="item in visitedRoutes"
:key="item.fullPath"
:closable="!isAffix(item)"
:tab="item.meta.title"
></a-tab-pane>
</a-tabs>
</div>
<div class="vab-tabs-right-panel">
<a-dropdown>
<template v-slot:overlay>
<a-menu @click="handleClick">
<a-menu-item key="closeOthersTabs">
<a>关闭其他</a>
</a-menu-item>
<a-menu-item key="closeLeftTabs">
<a>关闭左侧</a>
</a-menu-item>
<a-menu-item key="closeRightTabs">
<a>关闭右侧</a>
</a-menu-item>
<a-menu-item key="closeAllTabs">
<a>关闭全部</a>
</a-menu-item>
</a-menu>
</template>
<a-button style="margin-left: 8px">
更多
<DownOutlined />
</a-button>
</a-dropdown>
</div>
</div>
</template>
@ -180,6 +178,14 @@
.vab-tabs {
padding: 0 @vab-margin;
background: #ffffff;
&-left-panel {
float: left;
width: calc(100% - 52px - @vab-margin - @vab-margin);
}
&-right-panel {
float: left;
width: 52px;
}
.ant-tabs {
&-bar {
margin: 0 !important;
@ -191,6 +197,11 @@
background: #ffffff !important;
border: 1px solid #dedede !important;
}
&-tab-prev,
&-tab-next {
height: 32px !important;
line-height: 32px !important;
}
&-tab-active {
border: 1px solid #1890ff !important;
.ant-tabs-close-x {