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