@beisen/Sidebar

Sidebar使用说明

项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

Sidebar参数

  {
    hidden:false, //是否隐藏
    data:[
      {
        "name":"首页",
        "href":"#home",
        "active":true,
        "subMenu":[]
      },
      {
        "name":"仪表盘",
        "href":"#datavisualization",
        "active":false,
        "subMenu":[]
      },
      {
        "name":"工作计划",
        "open":false,
        "subMenu":[
          {
            "name":"计划1",
            "active":false,
            "href":"#home1"
          },
          {
            "name":"计划2",
            "active":false,
            "href":"#home2"
          },
          {
            "name":"计划3",
            "active":false,
            "href":"#home3"
          }
        ]
      },
      {
        "name":"绩效管理",
        "open":false,
        "subMenu":[
          {
            "name":"绩效管理1",
            "active":false,
            "href":"#home1"
          },
          {
            "name":"绩效管理2",
            "active":false,
            "href":"#home2"
          },
          {
            "name":"绩效管理3",
            "active":false,
            "href":"#home3"
          }
        ]
      },
      {
        "name":"人才魔方",
        "href":"#home5",
        "active":false,
        "subMenu":[]
      },
      {
        "name":"目标管理",
        "href":"#home4",
        "active":false,
        "subMenu":[]
      },
      {
        "name":"招聘系统",
        "href":"#home3",
        "active":false,
        "subMenu":[]
      },
      {
        "name":"职业发展",
        "href":"#home2",
        "active":false,
        "subMenu":[]
      },
      {
        "name":"同事",
        "href":"#home1",
        "active":false,
        "subMenu":[]
      },
      {
        "name":"应用1",
        "open":false,
        "subMenu":[
          {
            "name":"应用1",
            "active":false,
            "href":"#home1"
          },
          {
            "name":"应用2",
            "active":false,
            "href":"#home2"
          },
          {
            "name":"应用3",
            "active":false,
            "href":"#home3"
          }
        ]
      }
    ],
    onClick:function(val){console.log(val)} (可选)//取到点击列表的信息
  }

Sidebar调用方法

1. 引用组件

import Sidebar from "./src/index"

2. 传入参数

该参数为上述参数，传入方式使用: sidebarData={参数}

render () {
    return (
      <Sidebar sidebarData={this.state.data} sidebarClick={this.state.onClick} />
    )
  }