fix(tabs): only render dropdown for current route

This commit is contained in:
Uyarn 2022-03-25 01:05:01 +08:00
parent f2d9752190
commit b6ff64440c

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,7 +172,8 @@ export default defineComponent({
minColumnWidth={128} minColumnWidth={128}
popupProps={{ overlayClassName: 'router-tabs-dropdown' }} popupProps={{ overlayClassName: 'router-tabs-dropdown' }}
v-slots={{ v-slots={{
dropdown: () => ( dropdown: () =>
router.path === route.path ? (
<t-dropdown-menu> <t-dropdown-menu>
<t-dropdown-item onClick={() => handleRefresh(router.path, idx)}> <t-dropdown-item onClick={() => handleRefresh(router.path, idx)}>
<t-icon name="refresh" /> <t-icon name="refresh" />
@ -194,7 +196,7 @@ export default defineComponent({
</t-dropdown-item> </t-dropdown-item>
</t-dropdown-menu> </t-dropdown-menu>
), ) : null,
}} }}
> >
{!router.isHome ? router.title : <t-icon name="home" />} {!router.isHome ? router.title : <t-icon name="home" />}