react后台layout页面封装

基于 antd layout页面封装。依赖 antd, @ant-design/icons。 基础layout页面，包含顶部，左侧，右侧模块。左侧菜单最多支持二级。

安装

npm install --save @ahws/layouts

引入

import Layouts from '@ahws/layouts';

Demo

import React, { useState } from 'react';
import Layouts from '@ahws/layouts';
import logo from './logo.png';

// 菜单列表
const router: any = [
  {
    isMenu: true,
    title: '首页',
    icon: 'icon-codepen',
    path: '/index1',
    routes: [
      {
        path: '/index',
        isMenu: true,
        title: '我是首页',
        icon: 'icon-codepen',
        component: 'index page',
      },
    ]
  },
  {
    isMenu: true,
    title: '页面1',
    icon: 'icon-share',
    path: '/aa1',
    routes: [
      {
        path: '/a1',
        isMenu: true,
        title: '页面1-1',
      },
      {
        path: '/a2',
        isMenu: true,
        title: '页面1-2'
      },
    ]
  },
  ...
]

const LayoutsPage = (props: any) => {
  const [collapsed, setCollapsed] = useState<boolean>(false);

  const onCollapsed = (v: boolean) => {
    setCollapsed(v)
  }

  return (
    <Layouts
      location={props.location}
      collapsed={collapsed}
      onCollapsed={onCollapsed}
      headerL={
        <>header left</>
      }
      headerR={
        <>header right</>
      }
      // title="后台管理系统"
      title={<img src={logo} alt="" />}
      router={router}
      footer="Copyright  2021">
        内容 区域
    </Layouts>
  )
}

export default LayoutsPage;

Props

| 参数 | 说明 | 类型 | 默认值 | | -------- | -------- | -------- | -------- | | location | 必填。传递页面路由信息 props.location。menu菜单默认选中及展开需要 | Object | props.location | | title | 标题/logo | String/ReactNode | -- | | collapsed | 菜单是否收起状态 | Boolean | -- | | headerL | header 头部导航左侧侧自定义内容展示 | React.ReactNode | -- | | headerR | header 头部导航右侧自定义内容展示 | React.ReactNode | -- | | footer | 底部布局 | React.ReactNode / string | -- | | router | 项目路由列表，需配置 | Array | [] | | onCollapsed | 菜单收起展开状态回调，结合collapsed使用 | function(values: boolean) | -- | | onCollapsed | 菜单收起展开状态回调，结合collapsed使用 | function(values: boolean) | -- |

Props router

router 是用来左侧导航菜单展示，最多支持二级。具体实例用法参考上面demo。

• path 必要。页面路由地址，值是唯一的。一级菜单做为key使用，作为menu初始化展开的标记。

• icon 菜单图标，一级菜单生效，当前只能使用 Ant Design 官方图标库 的资源。

• isMenu 必要。是否在导航菜单上显示

• title 必要。导航菜单标题

效果图