Dd-rc-layout NPM

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	.