在后台项目中使用tabs导航是一个重要的功能
下面介绍一下如果配合umi框架和对应的插件实现此功能
参考实现:实现一个tabs
目前项目用的架构设计是umi3+react17+antd pro5
1.引入使用相关插件
插件地址: umi-plugin-keep-alive
npm install umi-plugin-keep-alive --save
# or
yarn add umi-plugin-keep-alive
2.公共组件封装
components文件夹下创建KeepAvlieTabs
对应的less样式请自行修改自己的需求
相关的keepAlive与生命周期使用方案及问题请到上述链接react-activation查看
创建index.tsx文件
// /components/KeepAvlieTabs/index.tsx
import { useAliveController } from 'react-activation';
import { arrayDeduplicate } from '@/utils/Array';
import type { CachingNode } from './type';
import Tab from './Tab';
import styles from './index.less';
import { useHistory, useLocation } from 'umi';
export default function KeepAliveTabs() {
// history导航
const history = useHistory();
// 本地路由信息
const location = useLocation();
// 获取缓存节点方法和信息
const { getCachingNodes } = useAliveController();
const cachingNodes: CachingNode[] = getCachingNodes();
// 因为是异步组件,需要在这儿处理一下缓存中的重复问题
let nodes: CachingNode[] = arrayDeduplicate(cachingNodes, 'path');
// 首页不参与tabs切换的关闭操作
nodes = nodes.filter((item) => item.path !== '/home');
return (
<ul className={styles['alive-tabs']}>
<li
className={location.pathname === '/home' ? styles.home_active : styles.home_deactive}
onClick={() => {
history.push('/home');
}}
>
<div className="tags-nav">
<span>首页</span>
</div>
</li>
{nodes.map((node) => (
<Tab key={node!.id} node={node} />
))}
</ul>
);
}
创建Tab.tsx文件
// /components/KeepAvlieTabs/Tab.tsx
import { useHistory, useLocation } from 'umi';
import { useAliveController } from 'react-activation';
import { CloseCircleOutlined } from '@ant-design/icons';
import type { CachingNode } from './type';
import styles from './index.less';
export default function Tab({ node }: { node: CachingNode }) {
const history = useHistory();
const location = useLocation();
// 同上,dropScope是释放节点,点删除后删掉当前节点信息
const { getCachingNodes, dropScope } = useAliveController();
const cachingNodes: CachingNode[] | any[] = getCachingNodes();
// 执行tab的删除操作
function dropTab(e: React.MouseEvent<HTMLButtonElement>) {
e.stopPropagation();
// 如果关闭激活中的 KeepAlive Tab,需要先离开当前路由
// 触发 KeepAlive unactivated 后再进行 drop
if (location.pathname === node.path) {
// 路由异步加载控制
const unlisten = history.listen(() => {
setTimeout(() => {
dropScope(node.name as string | RegExp);
}, 30);
});
unlisten();
// 前往排除当前 node 后的最后一个 tab
if (cachingNodes.length <= 1) {
history.push('/');
} else {
const { path } = cachingNodes.filter((item) => item.path !== node.path).pop();
history.push(path);
}
} else {
dropScope(node.name as string | RegExp);
}
}
// 设置当前tab的样式
const className = () => {
if (location.pathname === node.path) {
if (location.pathname === '/home') {
return `${styles.active} ${styles.home_active}`;
}
return `${styles.active}`;
}
return `${styles.deactive}`;
};
return (
<li
className={className()}
onClick={() => {
history.push(node.path);
}}
>
<div className="tags-nav">
<span>{node.name}</span>
{<CloseCircleOutlined className={styles['close-btn']} onClick={dropTab} />}
</div>
</li>
);
}
创建类型文件type.ts
export type CachingNode = {
createTime: number;
updateTime: number;
name?: string;
id: string;
[key: string]: any;
};
创建样式less文件
.alive-tabs {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
white-space: nowrap;
background: #fff;
li {
position: relative;
display: inline-block;
padding: 0 28px 0 10px;
line-height: 32px;
vertical-align: top;
list-style: none;
border-right: solid 1px #e6e6e6;
cursor: pointer;
transition: background 0.2s;
}
.active {
height: 32px;
background: rgba(#1890ff, 0.1);
border-bottom: 2px solid #1890ff;
// background-color: #42b983;
}
.home_active {
height: 32px;
padding: 0 10px;
background: rgba(#1890ff, 0.1);
border-bottom: 2px solid #1890ff;
// background-color: #42b983;
}
.home_deactive {
padding: 0 10px;
}
.deactive {
background: #fff;
}
.close-btn {
position: absolute;
top: 11px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
line-height: 0;
outline: none;
// transform: translateY(-50%);
}
}
3.在组件中使用keepAlive
创建Books/index.tsx
import React from 'react';
import { KeepAlive, useActivate, useUnactivate } from 'react-activation';
const Books: React.FC = () => {
useActivate(()=>{
console.log("我被激活了");
})
useUnactivate(()=>{
console.log("我被缓存了");
})
return <div>我是被缓存的组件</div>;
};
export default (props: any) => {
// 下面使用这样的方式去控制路由操作
// 是为了同步显示路由定义中的title和匹配路由path做对应的操作
// 可根据自行需求修改当前的逻辑
return (
<KeepAlive name={props.route.name} path={props.route.path} saveScrollPosition="screen">
<Books />
</KeepAlive>
);
};
4.keepAliveTabs挂载到界面上
我们的页面布局左上下结构,在app.tsx中,挂载到我们的头部中,超出显示滚动条,具体的样式和功能请自行添加
未实现鼠标右键菜单关闭所有,左右切换,请自行添加,antd有相关的组件
export const layout: RunTimeLayoutConfig = ({ initialState }: any) => {
return {
// 控制组件是否可缓存
disableMobile: true,
headerContentRender: () => <KeepAliveTabs />,
...
};
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。