思路：封装一个页签组件，包裹页面组件，页面渲染之后把数据缓存到全局状态实现页面缓存。
浏览本博客之前先看一下我的博客实现的功能是否满足需求，实现功能：
- 页面缓存
- 关闭当前页
- 鼠标右键>关闭当前
- 鼠标右键>关闭其他
- 鼠标右键>关闭左侧
- 鼠标右键>关闭右侧
- 鼠标右键>全部关闭(默认跳转到首页)
如果您需要实现刷新页签功能，建议react umi/max 页签(react-activation)-CSDN博客
1. models/tabs
// 全局共享数据示例
import { useState } from 'react';
const useUser = () => {
const [items, setItems] = useState<any[]>([]); // 页签的全局Item数据
const [key, setKey] = useState<string>('/home'); // 页签的高亮Key
return {
items,
setItems,
key,
setKey,
};
};
export default useUser;2. components/PageHeadTabs
import { Home } from '@/pages/Home';
import { useLocation, useModel, useRouteProps } from '@umijs/max';
import { Dropdown, Tabs } from 'antd';
import { useEffect } from 'react';
type PageHeadTabsProps = {
children: any;
};
const PageHeadTabs = (props: PageHeadTabsProps) => {
const { name } = useRouteProps(); //获取当前路由名称
const { children } = props; // Props获取元素、页面名称
const { items, setItems, key, setKey } = useModel('tabs'); // 获取全局Item和Key
const { pathname } = useLocation(); // 获取当前页的Pathname
// 页签点击事件
const onTabClick = (value: any) => {
setKey(value); // 设置高亮的Key
history.replaceState(null, '', value); // 拼接URL路径、但不执行跳转
};
// 关闭页签
const onEdit = (targetKey: any, action: 'add' | 'remove') => {
if (action === 'remove') {
let newActiveKey = key;
const lastIndex = items.findIndex((item) => item.key === targetKey);
const newPanes = items.filter((item) => item.key !== targetKey);
if (newPanes.length && newActiveKey === targetKey) {
if (lastIndex - 1 >= 0) {
newActiveKey = newPanes[lastIndex - 1].key;
} else {
newActiveKey = newPanes[0].key;
}
}
setItems(newPanes);
setKey(newActiveKey);
history.replaceState(null, '', newActiveKey);
}
};
// 关闭当前页
const onCurrent = (e: any) => {
e.domEvent.stopPropagation();
let targetKey = JSON.parse(e?.key).name;
let newActiveKey = key;
const lastIndex = items.findIndex((item) => item.key === targetKey);
const newPanes = items.filter((item) => item.key !== targetKey);
if (newPanes.length && newActiveKey === targetKey) {
if (lastIndex - 1 >= 0) {
newActiveKey = newPanes[lastIndex - 1].key;
} else {
newActiveKey = newPanes[0].key;
}
}
setItems(newPanes);
setKey(newActiveKey);
history.replaceState(null, '', newActiveKey);
};
// 关闭其他
const onOther = (e: any) => {
e.domEvent.stopPropagation();
let targetKey = JSON.parse(e?.key).name;
const newPanes = items.filter(
(item) => item.key === targetKey || item.key === '/home',
);
setItems(newPanes);
setKey(targetKey);
history.replaceState(null, '', targetKey);
};
//关闭左侧
const onLeft = (e: any) => {
e.domEvent.stopPropagation();
let targetKey = JSON.parse(e?.key).name;
const lastIndex = items.findIndex((item) => item.key === targetKey);
const newPanes = items
.splice(0, lastIndex + 1)
.filter((item) => item.key === targetKey || item.key === '/home');
const oldIndex = newPanes.findIndex((item) => item.key === key);
setItems(newPanes);
if (oldIndex) {
setKey(targetKey);
history.replaceState(null, '', targetKey);
}
};
// 关闭右侧
const onRight = (e: any) => {
e.domEvent.stopPropagation();
let targetKey = JSON.parse(e?.key).name;
const lastIndex = items.findIndex((item) => item.key === targetKey);
const newPanes = items.splice(0, lastIndex + 1);
const oldIndex = newPanes.findIndex((item) => item.key === key);
setItems(newPanes);
if (oldIndex) {
setKey(targetKey);
history.replaceState(null, '', targetKey);
}
};
// 关闭全部
const onAll = (e: any) => {
e.domEvent.stopPropagation();
const newPanes = items.splice(0, 1);
setItems(newPanes);
setKey('/home');
history.replaceState(null, '', '/home');
};
const labelDropdown = (name: string, label: string) => {
const lastIndex = items.findIndex((item) => item.key === name);
return (
<Dropdown
menu={{
items: [
{
label: '关闭当前',
key: JSON.stringify({ name, key: 'current' }),
disabled: name === '/home',
onClick: onCurrent,
},
{
label: '关闭其他',
key: JSON.stringify({ name, key: 'other' }),
disabled:
(name === '/home' && items.length <= 1) ||
(name !== '/home' && items.length <= 2),
onClick: onOther,
},
{
label: '关闭左侧',
key: JSON.stringify({ name, key: 'left' }),
disabled: lastIndex < 2,
onClick: onLeft,
},
{
label: '关闭右侧',
key: JSON.stringify({ name, key: 'right' }),
disabled:
(name === '/home' && items.length <= 1) ||
(name !== '/home' && items.length - lastIndex < 2),
onClick: onRight,
},
{
label: '全部关闭',
key: JSON.stringify({ name, key: 'all' }),
onClick: onAll,
disabled: name === '/home' && items.length <= 1,
},
],
}}
trigger={['contextMenu']}
>
<span>{label}</span>
</Dropdown>
);
};
useEffect(() => {
const index = !items.find(({ key }) => key === pathname);
const indexHome = !items.find(({ key }) => key === '/home');
// 如果用户部署从主页进入，引入主页组件作为默认页签
if (indexHome && pathname !== '/home') {
const arr = {
key: '/home',
label: '首页',
title: '首页',
closable: false,
children: <Home />,
};
setItems((item) => item?.concat([arr]));
}
// 添加当前页面到页签
if (index) {
const arr = {
key: pathname,
label: name,
title: name,
closable: pathname !== '/home',
children: children,
};
setItems((item) => item?.concat([arr]));
}
setKey(pathname);
}, []);
useEffect(() => {
// 页签长度发生变化时，塞入、更新所有标签右键下拉菜单
setItems((items) =>
items.map((item) => {
return { ...item, label: labelDropdown(item.key, item.title) };
}),
);
}, [items.length]);
return (
<Tabs
hideAdd
size="small"
type="editable-card"
activeKey={key}
onEdit={onEdit}
onTabClick={onTabClick}
items={items}
/>
);
};
export default PageHeadTabs;
3. pages/Home
import PageHeadTabs from '@/components/PageHeadTabs';
import React from 'react';
// *因为首页是默认页面所以有两种进入方式
// *第一种是通过/home进入，正常加载HomePage；
// *第二种是通过其他页面进入，加载Home即可。
export const Home: React.FC = () => {
return <div>Home</div>;
};
const HomePage: React.FC = () => {
return (
<PageHeadTabs title="首页">
<Home />
</PageHeadTabs>
);
};
export default HomePage;4. 其他页面
import PageHeadTabs from '@/components/PageHeadTabs';
import { Button } from 'antd';
// *除了Home页面，其他的包裹一层PageHeadTabs即可实现。
const AccessPage: React.FC = () => {
return (
<PageHeadTabs title="权限演示">
<Button>按钮</Button>
</PageHeadTabs>
);
};
export default AccessPage;5. 效果
自己临时封装的一个小组件，功能如上图。
缺点：没有刷新和拖拽功能。
优点：可以缓存页面。
