ant design pro v5 - 07 多标签窗口多窗口打开

1 安装组件：

安装 yarn add umi-plugin-keep-alive

2 创建模板：/src/services/types/menu.ts

export interface menuTabProps {tab: string;pathname?: string;key: string;closable?: boolean;}export interface menuItemProps {name: string;path?: string;children?: menuItemProps[];}

3 创建模板：/src/utils/base.ts

import type { menuItemProps } from '@/services/types/menu';/*** 处理菜单为一级数组* menus: 菜单数组*/
export const handleMenusToFlat = (menus: menuItemProps) => {const flatMenus: any[] = [];const handle = (arr: any) => {arr.forEach((item: menuItemProps) => {if (item.routes && item.routes.length) {handle(item.routes);} else {flatMenus.push({pathname: item.path,name: item.name,});}});};handle(menus);return flatMenus;
};

4 创建模板：/src/models/exitMenus.ts

import type { menuTabProps } from '@/services/types/menu';
import { useState, useCallback } from 'react'export default () => {const [exitMenus, setExitMenus] = useState<menuTabProps[]>([]);// 改变缓存菜单const updateMenus = useCallback((menus: menuTabProps[]) => {setExitMenus(menus);}, []);return {exitMenus,updateMenus,};
};

5 文件位置：/src/global.less 插入样式

// 多标签窗口
.antLayoutAdminTabs {width: 100%;height: 40px;display: block;:global {.ant-tabs {top: 72px;position: fixed;padding: 0 16px;width: 100%;margin: -24px -24px 0;background: #fff;z-index: 18;overflow: hidden;height: 40px;box-shadow: 0 1px 4px rgba(0, 21, 41, .08);}.ant-tabs-tab {background: #ffffff !important;border: 0 !important;font-size: 14px !important;border-bottom: 2px solid#ffffff !important;padding: 8px 18px !important;}.ant-tabs-tab-active {background: #e6f7ff !important;color: #1890ff !important;border-bottom: 2px solid#1890ff !important;}}
}

6 创建模板：/src/pages/layouts/commonLayout.tsx

import React, { useEffect, useState } from 'react';
import { Tabs } from 'antd';
import { history, useModel } from 'umi';
import { find } from 'lodash';
import { menuTabProps } from '@/services/types/menu';
import { handleMenusToFlat } from '@/utils/base';
import { KeepAlive, useAliveController } from 'react-activation';
import global from '@/global.less';const CommonLayout = (props: any) => {const { location, route } = props;const { pathname } = location;const [activeKey, setActiveKey] = useState<string>('');const { dropScope } = useAliveController();const { exitMenus, updateMenus } = useModel('exitMenus', (model) => ({exitMenus: model.exitMenus,updateMenus: model.updateMenus,}));const flatMenus = handleMenusToFlat(route.routes);const noCachRoutes = ['/', '/user/login']; // 不需要缓存的路由// console.log("2222222222222222222222222222222222222", route);useEffect(() => {// console.log(333, location, flatMenus);if (noCachRoutes.includes(pathname)) return;const arr: menuTabProps[] = exitMenus.filter((item: menuTabProps) => item.key !== pathname);if (arr.length === exitMenus.length) {const activeTab = find(flatMenus, (item) => item.pathname === pathname) || {};const activeMenu: menuTabProps = {label: activeTab.name,key: pathname,closable: exitMenus.length > 0, // 新增时,第一个页面不能删除};arr.push(activeMenu);updateMenus(arr);} else if (exitMenus.length === 1) {// 删除时,只剩一个标签去掉删除图标const data = exitMenus;data[0].closable = false;updateMenus(data);}setActiveKey(pathname);}, [location]);const onTabChange = (key: string) => {history.push(key);setActiveKey(key);// console.log(key);};return (<><div className={global.antLayoutAdminTabs}><Tabsitems={exitMenus}onChange={onTabChange}type='editable-card'hideAdd={true}activeKey={activeKey}onEdit={(path: string) => {// console.log(path, exitMenus, pathname);let activePath = pathname;const arr: menuTabProps[] = exitMenus.filter((item: menuTabProps, i: number) => {if (item.key === path) {// 获取前一个标签activePath = exitMenus[i - 1].key;}return item.key !== path;});// 如果关闭当前标签,展示前一个标签if (path === pathname) {history.push(activePath);}// 关闭页签去掉缓存dropScope(path);updateMenus(arr);}}/></div><KeepAlive when={true} id={pathname} name={pathname} saveScrollPosition="screen" >{props.children}</KeepAlive></>);
};export default CommonLayout;

7 文件位置：/config/routes.ts 继承模板

{path: '/',component: './layouts/commonLayout',flatMenu: true,routes: [// {//   path: '/welcome',//   name: '工作台',//   component: '@/pages/modules/welcome',// }]},

ant design pro v5 - 07 多标签窗口多窗口打开相关推荐

Umi v3 Ant Design Pro v5 从零开始实战视频教程（34 个视频）
Umi v3 & Ant Design Pro v5 从零开始实战视频教程(34 个视频) Umi v3 & Ant Design Pro v5 视频教程,从零开始学习,搭建一个完整的 ...
Ant Design Pro v5 正式版从零开始实战 Refresh Token 视频教程（13 个视频）
Ant Design Pro v5 正式版从零开始实战 Refresh Token 视频教程(13 个视频) Ant Design Pro v5 正式版出来了,跟之前的版本在代码上有些细微的差异,这套 ...
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程（33 个视频）
Ant Design Pro v5 获取动态菜单与基于角色权限管理视频教程(33 个视频) 很多人问如何获取动态菜单的,所以在 antd prov 5 来讲一下角色管理的.从最基础的用户管理,角色管理 ...
ant design pro v5去掉水印
ant design pro v5去掉水印 ant design pro v5去掉水印 ant design pro v5去掉水印配置水印,水印是 PageContainer 的功能,layout ...
Ant Design Pro V5删除自带的国际化
Ant Design Pro V5删除自带的国际化最近做了一个基于Ant Design pro v5 + umi3的集团晋升系统,运行项目的时候,路由那边自定义name的时候会触发框架自带的国际化, ...
ant design pro v5 总结
Ant Design Pro v5 使用心得相比V4,V5到底强在哪? 如何更改 title图标和加载时的页面? defaultSettings中菜单的几种模式及主题等配置国际化 request ...
Ant Design Pro模板无多标签页解决方案
白嫖了无尽岁月,我也来写个博客.希望能帮到你! 网上一些方案都是把官方模板替换成自己写的.本人的方案是在模板的基础上进行添砖加瓦,理解起来更容易! 解决思路是: 记录页面切换时的路由(onPageCh ...
Ant Design Pro V5精讲（实践篇一）：自定义登录界面、主界面
用户需求登录界面改造成自己的主界面的logo及产品名称改造成自己的语言包去掉或者只留中英语言包登录界面改造进入pages/user/login目录找到index.tsx // 去掉语言包栏目 ...
Ant Design Pro V5 入门指南
一.安装及完整区块.运行.打包命令 API: V5版:https://beta-pro.ant.design/index-cn ProTable:https://protable.ant.design ...

ant design pro v5 - 07 多标签窗口多窗口打开

ant design pro v5 - 07 多标签窗口多窗口打开相关推荐

最新文章

热门文章

ant design pro v5 - 07 多标签窗口 多窗口打开

ant design pro v5 - 07 多标签窗口 多窗口打开相关推荐

最新文章

热门文章

ant design pro v5 - 07 多标签窗口多窗口打开

ant design pro v5 - 07 多标签窗口多窗口打开相关推荐