菜单栏 KLSidebar

基本形式

KLSidebar只是对KLMenu的进一步封装,如果无法满足需求,可直接使用KLMenu组件; 除了KLMenu的功能外, 还增加菜单展开/收起的功能, 注意需要配置bodyEl属性; 注意:如果是单页,需要额外配置router属性,并将页面链接的url属性改为route属性;


<div class="demo-main">
    <div class="demo-head">
        <img src="//haitao.nos.netease.com/2fecfadc7d48464b90c2fe9b5d92412a.svg" width="34px" height="34px" style="margin-right:9px;" />
        考拉UI系统
    </div>
    <kl-sidebar menus={menus} bodyEl="j-body" width="200px" />
    <div id="j-body" class="demo-body"></div>
</div>

var component = new NEKUI.Component({
    template: template,
    data: {
      menus: [{
       title: '首页',
       iconClass: 'icon icon-home'
      }, {
       title: '库存管理',
       open: true,
       iconClass: 'icon icon-inventory',
       children: [{
         open: true,
         title: '商品实时数据',
         url: '/'
       },{
         title: '单据审核',
         url: '/'
       }]
     }, {
       title: '财务管理',
       iconClass: 'icon icon-financial',
       children: [{
         title: '对账管理',
         url: '/'
       },{
         title: '请款管理',
         url: '/'
       }]
     }, {
        title: '统计数据',
        iconClass: 'icon icon-statistics'
     }, {
        title: '订单管理',
        iconClass: 'icon icon-order'
     }, {
        title: '消息管理',
        iconClass: 'icon icon-message'
     }]
   }
});

API

KLSidebar

Param	Type	Default	Description
[options.data]	`object`		=> 绑定属性
[options.data.class]	`string`		=> 补充class
[options.data.menus]	`array`		=> 菜单数组
[options.data.top]	`string`	`"60px"`	=> 菜单style top的值
[options.data.active]	`boolean`	`true`	=> 默认是否收起
[options.data.bodyEl]	`string`		=> 主内容区body元素的id,当菜单收起时,拉伸bodyEl
[options.data.uniqueOpened]	`boolean`	`true`	=> 是否只保持打开一个菜单
[options.data.titleKey]	`string`	`"title"`	=> 一级菜单的字段key名
[options.data.urlKey]	`string`	`"url"`	=> 菜单结构中的链接key名
[options.data.routeKey]	`string`	`"route"`	=> 单页spa应用时,使用
[options.data.pageKey]	`string`	`"title"`	=> 二级菜单的字段key名
[options.data.childrenKey]	`string`	`"children"`	=> 一级菜单对象下二级菜单数组的key名
[options.data.router]	`object`		=> 单页应用时, 请将regular-state的manager实例传入
[options.data.width]	`string`		=> sidebar的宽度设置,默认181px
[options.data.scrollIntoView]	`boolean`	`false`	=> 是否需要scrollIntoView

toggle 收缩菜单时触发Event

Name	Type	Description
active	`boolean`	展开还是收缩

menuitem-click 选择某一页时触发Event

Name	Type	Description
menuitem	`object`	点击的menuItem实例