image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-09-20 02:34: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 Setting from './setting.vue';
import { prefix } from '@/config/global'; import { prefix } from '@/config/global';
import { TRouterInfo } from '@/interface';
import '@/style/layout.less'; import '@/style/layout.less';
@ -161,7 +162,7 @@ export default defineComponent({
style={{ maxWidth: '100%', position: 'fixed', overflow: 'visible' }} style={{ maxWidth: '100%', position: 'fixed', overflow: 'visible' }}
onRemove={handleRemove} onRemove={handleRemove}
> >
{tabRouters.map((router: any, idx: number) => ( {tabRouters.map((router: TRouterInfo, idx: number) => (
<t-tab-panel <t-tab-panel
value={router.path} value={router.path}
key={`${router.path}_${idx}`} key={`${router.path}_${idx}`}
@ -171,30 +172,31 @@ export default defineComponent({
minColumnWidth={128} minColumnWidth={128}
popupProps={{ overlayClassName: 'router-tabs-dropdown' }} popupProps={{ overlayClassName: 'router-tabs-dropdown' }}
v-slots={{ v-slots={{
dropdown: () => ( dropdown: () =>
<t-dropdown-menu> router.path === route.path ? (
<t-dropdown-item onClick={() => handleRefresh(router.path, idx)}> <t-dropdown-menu>
<t-icon name="refresh" /> <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" />
关闭左侧
</t-dropdown-item> </t-dropdown-item>
)} {idx > 0 && (
{idx < tabRouters.length - 1 && ( <t-dropdown-item onClick={() => handleCloseAhead(router.path, idx)}>
<t-dropdown-item onClick={() => handleCloseBehind(router.path, idx)}> <t-icon name="arrow-left" />
<t-icon name="arrow-right" /> 关闭左侧
关闭右侧 </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>
)} </t-dropdown-menu>
<t-dropdown-item onClick={() => handleCloseOther(router.path, idx)}> ) : null,
<t-icon name="close-circle" />
关闭其它
</t-dropdown-item>
</t-dropdown-menu>
),
}} }}
> >
{!router.isHome ? router.title : <t-icon name="home" />} {!router.isHome ? router.title : <t-icon name="home" />}