antd pro(V5) 实现多tab
官方不支持多tab,所以需要自己去处理根据以往的经验这个不是很复杂,主要的技术点如下:1.样式(抄的vue-element-admin)2.antd pro项目干预点app.tsximport TagView from '@/components/TagView';import EventEmitter from '@ytCommon/utils/eventEmitter'; //发布订阅layo
·
官方默认不支持多tab,所以需要自己去处理根据以往的经验这个不是很复杂。
主要的技术点如下:
1.样式(抄的vue-element-admin)
2.antd pro项目干预点app.tsx
import TagView from '@/components/TagView';
import EventEmitter from '@ytCommon/utils/eventEmitter'; //发布订阅
layout rightContentRender方法返回TagView
onPageChange 页面改变的时候利用发布订阅发送命令
EventEmitter.emit('routerChange', location);
3.各种事件处理
4.最核心的keep-alive,使用的是umi-plugin-keep-alive
#安装
npm install umi-plugin-keep-alive --save
# or
yarn add umi-plugin-keep-alive
使用方法 在页面引入 包裹在根组件上即可
import { KeepAlive } from 'umi';
return (
<KeepAlive>
<Test />
</KeepAlive>
)
流程虽然不是很复杂,但是真正做的时候需要费一番功夫的,各种细节比较多。最终结果如下:
更多推荐
已为社区贡献4条内容
所有评论(0)