0.0.19 • Published 7 years ago
@beisen/Sidebar v0.0.19
Sidebar使用说明
项目运行
cnpm install 或 npm install cnpm使用教程
npm run dev (开发环境打包 port:8080)
npm run test (测试用例)
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调用方法
引用组件
import Sidebar from "./src/index"
传入参数
该参数为上述参数,传入方式使用: sidebarData={参数}
render () { return ( <Sidebar sidebarData={this.state.data} sidebarClick={this.state.onClick} /> ) }