image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-11-10 10:28:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(tabs): only render dropdown for current route

Browse Source
This commit is contained in:
Uyarn 2022-03-25 01:05:01 +08:00
parent f2d9752190
commit b6ff64440c
1 changed files with 25 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/layouts/index.tsx
View File

@ -11,6 +11,7 @@ import LayoutContent from './components/Content.vue';
import Setting from './setting.vue';
import { prefix } from '@/config/global';
import { TRouterInfo } from '@/interface';
import '@/style/layout.less';
@ -161,7 +162,7 @@ export default defineComponent({
style={{ maxWidth: '100%', position: 'fixed', overflow: 'visible' }}
onRemove={handleRemove}
>
{tabRouters.map((router: any, idx: number) => (
{tabRouters.map((router: TRouterInfo, idx: number) => (
<t-tab-panel
value={router.path}
key={`${router.path}_${idx}`}
@ -171,30 +172,31 @@ export default defineComponent({
minColumnWidth={128}
popupProps={{ overlayClassName: 'router-tabs-dropdown' }}
v-slots={{
dropdown: () => (
<t-dropdown-menu>
<t-dropdown-item onClick={() => handleRefresh(router.path, idx)}>
<t-icon name="refresh" />
刷新
</t-dropdown-item>
{idx > 0 && (
<t-dropdown-item onClick={() => handleCloseAhead(router.path, idx)}>
<t-icon name="arrow-left" />
关闭左侧
dropdown: () =>
router.path === route.path ? (
<t-dropdown-menu>
<t-dropdown-item onClick={() => handleRefresh(router.path, idx)}>
<t-icon name="refresh" />
刷新
</t-dropdown-item>
)}
{idx < tabRouters.length - 1 && (
<t-dropdown-item onClick={() => handleCloseBehind(router.path, idx)}>
<t-icon name="arrow-right" />
关闭右侧
{idx > 0 && (
<t-dropdown-item onClick={() => handleCloseAhead(router.path, idx)}>
<t-icon name="arrow-left" />
关闭左侧
</t-dropdown-item>
)}
{idx < tabRouters.length - 1 && (
<t-dropdown-item onClick={() => handleCloseBehind(router.path, idx)}>
<t-icon name="arrow-right" />
关闭右侧
</t-dropdown-item>
)}
<t-dropdown-item onClick={() => handleCloseOther(router.path, idx)}>
<t-icon name="close-circle" />
关闭其它
</t-dropdown-item>
)}
<t-dropdown-item onClick={() => handleCloseOther(router.path, idx)}>
<t-icon name="close-circle" />
关闭其它
</t-dropdown-item>
</t-dropdown-menu>
),
</t-dropdown-menu>
) : null,
}}
>
{!router.isHome ? router.title : <t-icon name="home" />}