react ts redux-saga | 谷歌Chrome浏览器风格的标签组件 | 中台

谷歌Chrome浏览器风格的标签组件

选用技术

• react
• typescript
• redux-saga存储本地标签数据
• umi

实现

• [x] 支持全部关闭，当前关闭，关闭其他Tab
• [x] 支持Tab过多的自适应
• [x] chrome风格
• [x] 内圆角css

1. 使用

import MenuTab from '@components/MenuTab'<MenuTab location={props.location} />


1. 代码

/**
* 菜单标签组件
* createDate: 2020年04月29日
*/
// menus数据结构:
// {
// title: '资料管理',
// path: '/DataManage',
// subs: [
// {
// title: '商品资料',
// path: '/Goods',
// fullPath: '/DataManage/Goods',
// },
// {
// title: '供应商查询',
// path: '/Suppliers',
// fullPath: '/DataManage/Suppliers',
// },
// ],
// },
import React, { useEffect, useRef, useState, useMemo } from 'react'
import { useHistory } from 'react-router-dom'
import { connect } from 'react-redux'
import classNames from 'classnames'
import { CloseOutlined, MoreOutlined } from '@ant-design/icons'
import menus from '@config/menus'
import { Popover } from 'antd'
import style from './Style.less'interface Iprop {
location: any
MenuTabStore: any
}interface ITab {
name: string
path: string
}/** 可优化点：redux匹配好存本地而不是每次打开页面都遍历,不过性能差距不大
* 根据path匹配name,返回
* @param menu 路由菜单
* @param path 当前路由
* @return ITab
*/
const matchRouterPath = (menu: any[], path: string, menuList: Array) => {
for (let item of menu) {
if (item.fullPath === path) {
menuList.push({
name: item.title,
path: item.fullPath
})
break;
}
// 为编辑页和详情页做补充
if (path.indexOf(item.fullPath) !== -1) {
if (path.indexOf('/Detail') !== -1) {
menuList.push({
name: item.title + '详情页',
path: path
})
}
if (path.indexOf('/Edit') !== -1) {
menuList[0] = {
name: item.title + '编辑/新增页', // 动态路由控制，为避免不和其他地方冲突，暂时写死
path: path
}
}
if (path.indexOf('/New') !== -1) {
menuList.push({
name: item.title + '新增页',
path: path
})
}
} if (item.fullPath !== path && item.subs && item.subs.length > 0) {
matchRouterPath(item.subs, path, menuList)
}
}
if (menuList.length) {
return menuList[0];
}
}const MenuTab = (props: Iprop) => {
const { location, dispatch = () => { }, MenuTabStore } = props
const { menuTabList } = MenuTabStore
const { pathname } = location
const dashboardPath = '/Home'
const history = useHistory()
const cTablimit = 0 // tab控制格式
const menuTabRef: any = useRef(null)
const [currentTabObj, setCurrentTabObj] = useState()
const isTabShow = pathname.match(/[/]/g).length > 1 // 暂定 二级路由才显示tabList // 是否当前tab
const isTabActive = (e: string) => {
return classNames(style.tab, {
[style.menuTabActive]: e === pathname
})
} const updateMenuTab = (tabList: any[]) => {
dispatch({
type: 'MenuTabStore/updateTabList',
payload: tabList
})
} useEffect(() => {
setCurrentTabObj(matchRouterPath(menus, pathname, []) || {})
}, [pathname]) // 路由变化才监听 useEffect(() => {
if (currentTabObj && Object.keys(currentTabObj).length) { // 不匹配的路由则无法更新到store
if (!menuTabList.length) { // tabs为空则直接concat
updateMenuTab(menuTabList.concat([currentTabObj]))
return
}
const isTabExist = menuTabList.filter(e => e.path === pathname)
if (isTabExist.length) { // tab已存在，不处理
return;
} else {
updateMenuTab(menuTabList.concat([currentTabObj]))
}
}
}, [currentTabObj]) // 当前tab存在才监听 // 切换tab
const toggleTab = (e: string) => {
history.replace(e)
} // tab控制是否显示
const isTabControlShow = () => {
if (menuTabList && menuTabList.length > cTablimit) {
return style.menuTabWrap + ' ' + style.showTabcontrol
}
return style.menuTabWrap
} // 关闭tab
const closeTabs: void = (e: any, type: string) => {
e.stopPropagation()
const clearTab = () => {
updateMenuTab([])
history.push(dashboardPath)
}
switch (type) {
case 'current':
if (menuTabList && menuTabList.length) {
const _i = menuTabList.findIndex((v) => v.path === pathname)
if (menuTabList && menuTabList.length > 1) {
const _arr = menuTabList.filter((e, i) => {
return i !== _i
})
updateMenuTab(_arr)
if (_arr.length === 1) { // 如果当前只剩一个tab
history.push(_arr[0].path)
} else {
history.goBack()
}
} else {
clearTab()
}
}
break;
case 'others':
updateMenuTab([
{
name: currentTabObj.name,
path: pathname
}
])
break;
case 'all':
clearTab()
break; default:
break;
}
} // 关闭指定tab
const btnCloseTab = (e: any, path: string) => {
e.stopPropagation()
if (currentTabObj.path === path) { // 当前
closeTabs(e, 'current')
return;
}
const _i = menuTabList.findIndex((v) => v.path === path)
const _arr = menuTabList.filter((e, i) => {
return i !== _i
})
updateMenuTab(_arr)
} const tabControlContent = (
<div className={style.tabControlPop}>
<div
onClick={(e) => {
closeTabs(e, 'current')
}}>
关闭当前标签页
</div>
<div
onClick={(e) => {
closeTabs(e, 'others')
}}>
关闭其他标签页
</div>
<div
onClick={(e) => {
closeTabs(e, 'all')
}}>
关闭全部标签页
</div>
</div>
) // 太多tab自适应
const [rect, setRect] = useState(menuTabRef.current?.getBoundingClientRect())
console.log('rect', rect);
useEffect(() => {
setRect(menuTabRef.current?.getBoundingClientRect())
window.addEventListener('resize', () => {
setRect(menuTabRef.current?.getBoundingClientRect())
})
return () => {
window.removeEventListener('resize', () => {
setRect(menuTabRef.current?.getBoundingClientRect())
})
}
}, [])
const rectWidth = useMemo(() => {
return rect ? rect.width - 18 : '100%'
}, [rect])
const tabWidth = useMemo(() => {
if (typeof rectWidth === 'string') {
return '100%'
}
return rectWidth / menuTabList.length - 3
}, [rectWidth, menuTabList.length])
return isTabShow && menuTabList.length ? (
<div ref={menuTabRef} className={style.menuContainer}>
<div style={{ width: rectWidth }} className={isTabControlShow()}>
{menuTabList.map((e) => {
const { path, name } = e
return (
<div
key={path}
className={`list-tab ${isTabActive(path)}`}
style={{ width: tabWidth }}
onClick={() => {
toggleTab(path)
}}
>
<div key={e} className='ellipsis'>
{name}
</div>
<div className={style.closeTabIcon}>
<CloseOutlined
className={style.tabClose}
onClick={(item) => {
btnCloseTab(item, path)
}}
/>
</div>
</div>
)
})}
</div>
<Popover content={tabControlContent} placement='bottomRight'>
<div className={style.moreOut}>
<MoreOutlined
className={menuTabList && menuTabList.length > cTablimit ? style.showMore : style.hideMore}
/>
</div>
</Popover>
</div>
) : null
}export default connect(({ MenuTabStore }: any) => ({
MenuTabStore
}))(MenuTab)

github