dd-rc-layout

基于 react + react-router + antd 制定的两种常用布局。

安装

import { Layout } from 'dd-rc-layout';

const App = React.createClass({
  render(){
    const navs = [
      {
        name: 'item_1',
        IndexLink: true,
        icon: 'mail',
        to: '/MenuItem_1'
      }
    ];
    return (
      <Layout
        mode="ui_1"
        appName="Layout"
        userName="userName"
        navs={[
          {
            name: 'item_1',
            IndexLink: true,
            icon: 'mail',
            to: '/MenuItem_1',
          }
        ]}
        footer="版权...."
        headerCustomize={[
          <li key="1"><a>自定义1</a></li>,
          <li key="2"><a>自定义2</a></li>
        ]}
      >
        {this.props.children}
      </Layout>
    )
  }
)}

let routeConfig = [
  { 
    path: '/',
    component: App,
    indexRoute: { component: MenuItem_1 },
    childRoutes: [
      { 
        path: 'MenuItem_1',
        component: MenuItem_1
      }, { 
        path: 'MenuItem_2',
        component: MenuItem_2,
        childRoutes: [
          { path: '/MenuItem_2_sub_1', component: MenuItem_2_sub_1 }
        ]
      }
    ]
  }
];

const routes = (
  <Router routes={routeConfig} />
);

ReactDOM.render(routes, document.getElementById('react-content'));

API

| 参数 | 说明 | 类型 | 默认值 |
| ---- | ---- | ---- | ------ |
| mode | 布局类型, ui_1为左右布局, ui_2为上下布局, ui_3带节点树布局 | enum: ui_1 ui_2 ui_3 | 'ui_1' |
| appName | 站点名称 | string | |
| appLogo | 站点logo地址 | string | |
| userName | 登录获取用户名，值为false时关闭显示用户名，其他情况开启。为函数时必须返回一个 Promise 对象，resolve 的第一个参数为用户名字符串；不设置该参数或为true时，通过当前域名下的/login/username获取用户名。 | boolean|string|function | | | logoutApi | 退出登录接口 | string | './logout' |
| footer | 底部信息 | string | |
| navs | 导航栏配置 | object | |
| breadcrumb | 面包屑(上下布局可以设置是否显示) | boolean | false | | headerCustomize | 头部右侧自定义空间 | String or React.Element | |

navs

导航栏配置

| 参数 | 说明 | 类型 | 默认值 | |-----|------|-----|-------| | name | 栏目名称 | string | | | IndexLink | 是否为首页 | boolean | | | icon | 图标 | string | | | to | 链接地址 | string | | | query | query | object | | | children | 子栏目 | object | | | treeHide | 是否隐藏左侧节点树 | boolean | false | | hide | 是否隐藏 | boolean | false |

nstree

nstree配置

| 参数 | 说明 | 类型 | 默认值 | |-----|------|-----|-------| | treeApi | 节点树接口 | string | | | nstreeBeforeInit | 初始化前回调 | function | | | nstreeAfterInit | 初始化后回调 | function | | | zTreeObjSetting | ztree配置 | object | | | nstreeSearch | search模块配置 | object | | | nstreePathSep | 节点空间分隔符号 | string | . |

License

MIT