React 后台管理制作历史导航条

桃扇骨 2022-10-10 09:46 163阅读 0赞

更多文章请访问 [深的个人博客][Link 1]

## 效果图 ##

![在这里插入图片描述][2021062712523234.gif]

## 项目目录 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTcwMDk3_size_16_color_FFFFFF_t_70]

## 分析 ##

> 1、在Tabs组件里使用 this.props.history.listen 监听路由变化，路由变化时就添加对应的历史记录
> 
> 2、在Tabs组件和LeftMenu组件里使用事件订阅进行通信（pubsub-js）, 当点击Tabs组件里的标签时，leftMenu跳转到相应的菜单栏

**Tabs组件注意点**

> 1、因为Tabs组件的标签是有展开和隐藏功能，所以需要获取到相应盒子的高度，使用refs获取盒子高度时，可以先执行this.setState(\{\})更新一下页面，这样获取的高度才是准确的（或许也需要使用定时器延迟获取高度），在网上查阅资料的时候，查到可以使用[Mutation Observer API 用来监视 DOM 变动][Mutation Observer API _ DOM]

> 2、需要使用监听浏览器窗口的大小： window.addEventListener(“resize”, feekback, false)，Tabs展开的高度是需要动态改变的

> 3、点击菜单栏和删除历史记录时都需要重新获取相应盒子的高度

> 4、通过 this.props.history.listen 监听路由改变，需要在组件卸载的时候时候执行解绑（监听窗口大小的的事件也是需要解绑），解绑this.props.history.listen 的方法是：在 componentWillUnmount 生命周期中执行 this.props.history.listen 事件的返回值 ，示例如下：

import React, {  Component } from 'react';
    let unListen; // this.props.history.listen 事件的返回值，用于解绑listen事件
    class Tabs extends Component { 
        componentDidMount () { 
            // 监听路由变化
            unListen = this.props.history.listen((route) => { 
    
            });
            // 监听窗口的变化
            window.addEventListener("resize", this.listenerResize, false);
        }
        componentWillUnmount () { 
            // 执行解绑this.props.history.listen
            unListen && unListen(); 
            // 解绑窗口监听
            window.removeEventListener("resize", this.listenerResize); 
      	}
        render() { 
            return (
                <div>
                    
                </div>
            );
        }
    }
    
    export default Tabs;

## 完整代码 ##

#### LeftMenu.jsx ####

import React, {  Component } from "react";
    import {  Menu } from "antd";
    import PubSub from "pubsub-js"; //引入
    import {  AppstoreOutlined, MailOutlined } from "@ant-design/icons";
    import menuList from "../../config/menusConfig";
    import root from "../../config/root"
    import "./leftmenu.scss";
    const {  SubMenu } = Menu;
    
    export default class menu extends Component { 
    
      state = { 
        collapsed: false,
        selectedKeys: [],
        openKeys: [],
        menubar: [],
        role: "companyAdmin"
      };
      componentDidMount () { 
        let userInfo = localStorage.getItem("userInfo");
        if (userInfo) { 
          let {  role } = JSON.parse(userInfo);
          this.setState({  role })
        }
    
        // 点击Tabs组件时触发，进行菜单匹配
        PubSub.subscribe("switch", (_, path) => { 
          this.setState({  selectedKeys: [path] });
          this.judgeSubmenu(path);
        }); //订阅
        const menubar = this.creatMenu(menuList);
        this.setState({ 
          menubar,
        });
      }
      toggleCollapsed = () => { 
        this.setState({ 
          collapsed: !this.state.collapsed,
        });
      };
      goPage = (path) => { 
        return () => { 
          this.props.goPage(path);
        };
      };
      // 选择菜单
      selectMenu = (obj) => { 
        this.setState({  selectedKeys: [obj.key] });
        PubSub.publish("updateList"); //发布消息
      };
      openSubmenu = (obj) => { 
        this.setState({  openKeys: obj });
      };
      // 判断当前url对应的菜单，点击Tabs时需要进行匹配
      judgeSubmenu (key) { 
        menuList.forEach((item) => { 
          if (item.children) { 
            item.children.forEach((itemChild) => { 
              if (itemChild.key === key) { 
                this.setState({  openKeys: [item.key] });
                return item;
              }
            });
          } else { 
            if (item.key === key) { 
              this.setState({  openKeys: [item.key] });
              return item;
            }
          }
        });
      }
      // 生成menu
      creatMenu = (itemList) => { 
        return itemList.map((item) => { 
          if (this.judgement(item)) { 
            if (item.children) { 
              return (
                <SubMenu
                  key={ item.key}
                  title={ item.title}
                  icon={ <AppstoreOutlined />}
                >
                  { this.creatMenu(item.children)}
                </SubMenu>
              );
            } else { 
              return (
                <Menu.Item
                  key={ item.key}
                  icon={ <MailOutlined />}
                  onClick={ this.goPage(item.key)}
                >
                  { item.title}
                </Menu.Item>
              );
            }
          }
        });
      };
      // 判断当前登录的角色是否有权限查看该菜单项
      judgement = (menu) => { 
        let {  role } = this.state
        if (root[role][menu.key].show) { 
          return true;
        } else { 
          return false;
        }
      };
    
      render () { 
        let {  selectedKeys, openKeys, menubar } = this.state;
        return (
          <div style={ {  width: 200 }} className="menu_box">
            { /* <Button type="primary" onClick={this.toggleCollapsed} style={ { marginBottom: 16 }} > {React.createElement( this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined )} </Button> */}
            <Menu
              defaultSelectedKeys={ ["0"]}
              defaultOpenKeys={ ["sub0"]}
              mode="inline"
              theme="dark"
              selectedKeys={ selectedKeys}
              onClick={ this.selectMenu}
              onOpenChange={ this.openSubmenu}
              openKeys={ openKeys}
            >
              { menubar}
            </Menu>
          </div>
        );
      }
    }

#### Tabs.jsx ####

import React, {  Component } from "react";
    import {  withRouter } from "react-router-dom";
    import { 
      CloseOutlined,
      HomeOutlined,
      RightSquareOutlined,
    } from "@ant-design/icons";
    import PubSub from "pubsub-js"; //引入
    import "./tabs.scss";
    let unListen; // this.props.history.listen 事件的返回值，用于解绑listen事件
    class Tabs extends Component { 
      historyObj = { 
        "/admin/company": "公司管理",
        "/admin/personnel": "人员管理",
        "/admin/warehouse": "仓库管理",
        "/admin/warehouse/detail": "仓库详情",
        "/admin/maintenance": "维修厂管理",
        "/admin/maintenance/detail": "维修厂详情",
        "/admin/mac": "mac地址管理",
        "/admin/steel": "型钢管理",
        "/admin/project": "项目管理",
        "/admin/project/detail": "项目详情",
        "/admin/demand": "需求单管理",
        "/admin/demand/detail": "需求单详情",
        "/admin/clock/size": "规格尺寸",
        "/admin/clock/material": "材料厂商",
        "/admin/clock/manufacturing": "制造厂商",
        "/admin/clock/transport": "运输公司",
        "/admin/clock/price": "型钢单价",
        "/admin/log": "日志管理",
        "/admin/modify": "修改密码",
      };
      state = { 
        pathList: [], // 历史记录数组
        activePath: "", // 当前的path
        showFlag: true, // 展开与隐藏的标识
        outHeight: 40, // tab外部盒子的高度，当tab的数量超过一行时会隐藏
        tabHeight: 0, // tab内部的盒子高度，
      };
      componentDidMount () { 
        PubSub.subscribe("updateList", (_) => { 
          // console.log("数据更新");
          if (this.tabDiv && this.tabDiv.clientHeight) { 
            this.setState({  tabHeight: this.tabDiv.clientHeight });
            setTimeout(() => { 
              if (
                !this.state.showFlag &&
                this.outDiv.clientHeight < this.tabDiv.clientHeight
              ) { 
                this.setState({  outHeight: this.tabDiv.clientHeight });
              }
            }, 400);
          }
        }); //订阅
        let activePath = localStorage.getItem("activePath");
        this.setState({  activePath });
        // 监听路由变化
        unListen = this.props.history.listen((route) => { 
          // console.log(route.pathname); // 这个route里面有当前路由的各个参数信息
          // console.log(route.pathname == "/admin/index");
          localStorage.setItem("activePath", route.pathname);
          this.setState({  activePath: route.pathname });
          if (
            route.pathname === "/admin/index" ||
            route.pathname === "/" ||
            route.pathname === "/login" ||
            route.pathname === "/admin/error/not" ||
            route.pathname === "/admin/error/redirect" ||
            route.pathname === "/admin/error/systemerror"
          ) { 
            return;
          }
          // console.log(this.historyObj[route.pathname]);
          let {  pathList } = this.state;
          let index = pathList.findIndex((item) => { 
            return item === route.pathname;
          });
          if (index === -1) { 
            pathList.push(route.pathname);
            this.setState({  pathList });
          }
        });
        window.addEventListener("resize", this.listenerResize, false);
      }
      // 浏览器窗口变化执行的函数
      listenerResize = () => { 
        this.setState({ });
        if (this.outDiv.clientHeight > this.tabDiv.clientHeight) { 
          this.setState({  outHeight: this.tabDiv.clientHeight });
          if (this.tabDiv.clientHeight === 40) { 
            let {  showFlag } = this.state;
            this.setState({  showFlag: !showFlag });
          }
        }
        if (
          !this.state.showFlag &&
          this.outDiv.clientHeight < this.tabDiv.clientHeight
        ) { 
          this.setState({  outHeight: this.tabDiv.clientHeight });
        }
        this.setState({  tabHeight: this.tabDiv.clientHeight });
      };
      // 删除历史记录
      removeHistory = (path) => { 
        return () => { 
          let {  pathList } = this.state;
          let list = pathList.filter((item) => { 
            return item !== path;
          });
          setTimeout(() => { 
            this.setState({  pathList: list });
            if (this.outDiv.clientHeight > this.tabDiv.clientHeight) { 
              this.setState({ 
                outHeight: this.tabDiv.clientHeight,
                tabHeight: this.tabDiv.clientHeight,
              });
              if (this.tabDiv.clientHeight === 40) { 
                let {  showFlag } = this.state;
                this.setState({  showFlag: !showFlag });
              }
            }
          }, 100);
        };
      };
      // 页面跳转
      goPage = (path) => { 
        return () => { 
          this.props.history.push({  pathname: path });
          PubSub.publish("switch", path); //发布消息
        };
      };
      goHome = () => { 
        // console.log("执行返回");
        this.props.history.push({  pathname: "/admin/index" });
      };
      // 展示与隐藏
      showFunc = () => { 
        let {  showFlag } = this.state;
        this.setState({  showFlag: !showFlag });
        if (showFlag) { 
          this.setState({  outHeight: this.tabDiv.clientHeight });
        } else { 
          this.setState({  outHeight: 40 });
        }
      };
      componentWillUnmount () { 
        unListen && unListen(); // 执行解绑this.props.history.listen
        window.removeEventListener("resize", this.listenerResize);
      }
      render () { 
        let {  pathList, activePath, outHeight, tabHeight, showFlag } = this.state;
        return (
          <div
            className="tab_out_box"
            ref={ (outDiv) => (this.outDiv = outDiv)}
            style={ {  height: outHeight }}
          >
            <div className="tabs_box" ref={ (tabDiv) => (this.tabDiv = tabDiv)}>
              <div
                onClick={ this.goHome}
                className={ 
                  activePath === "" || activePath === "/admin/index"
                    ? `home_box home_null_box`
                    : `home_box home_block_box`
                }
              >
                <HomeOutlined style={ {  fontSize: 18 }} />
              </div>
              { pathList.map((item) => { 
                return (
                  <div
                    className={ item === activePath ? `tab_active tabs` : "tabs"}
                    key={ item}
                  >
                    <div
                      className={ 
                        item === activePath ? `tabs_text_active tabs_text` : "tabs"
                      }
                      onClick={ this.goPage(item)}
                    >
                      { this.historyObj[item]}
                    </div>
                    <CloseOutlined
                      onClick={ this.removeHistory(item)}
                      style={ {  fontSize: 12 }}
                      className={ item === activePath ? `tabs_icon_active` : ""}
                    />
                  </div>
                );
              })}
            </div>
            <div
              className={ tabHeight > 40 ? `spread_icon show_spread` : `spread_icon`}
            >
              <RightSquareOutlined
                style={ {  fontSize: 20 }}
                onClick={ this.showFunc}
                className={ 
                  showFlag
                    ? `square_outlined show_right`
                    : `square_outlined show_Down`
                }
              />
              { /* <DownSquareOutlined style={ { fontSize: 20 }} className= {showFlag ? `square_outlined show_Down` :`square_outlined`} onClick={() => { this.showFunc(false); }} /> */}
            </div>
          </div>
        );
      }
    }
    
    export default withRouter(Tabs);

[Link 1]: http://www.yemengshen.cn
[2021062712523234.gif]: /images/20221005/85b9ec1a47f0499285583134e04d40c3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3OTcwMDk3_size_16_color_FFFFFF_t_70]: /images/20221005/f26485fb09b44b328068d1a4ea55c2c2.png
[Mutation Observer API _ DOM]: https://segmentfault.com/a/1190000039207626?utm_source=tag-newes