代码演示

基本形式

<div class="demo-main">
    <div class="demo-head">
        JRUI系统
    </div>
    <jr-sidebar uniqueOpened={uniqueOpened} menus={menus} bodyEl="j-body" ref='slider'/>
    <div id="j-body" class="demo-body">
        <jr-card title="标题">
            content
        </jr-card>
    </div>
</div>
 <div>
     <jr-button class='primary' on-click={this.toggle()} title='{title}'/>
     <jr-button class='primary' on-click={this.selecteItem('#A')} title='菜单A'/>
     <jr-button class='primary' on-click={this.selecteItem('#B')} title='菜单B'/>
     <jr-button class='primary' on-click={this.selecteItem('#C')} title='菜单C'/>
     <jr-button class='primary' on-click={this.selecteItem('#D')} title='菜单D'/>
 </div>

var component = new JRUI.Component({
    template: template,
    data: {
        uniqueOpened:true,
        title:'不收起其他菜单',
        menus: [{
         title: '一级菜单A',
         open: true,
         children: [{
           title: '二级菜单A',
           url: '#A'
         },{
           title: '二级菜单B',
           open:true,
           url: '#B'
         }]
       }, {
         title: '一级菜单B',
         children: [{
           title: '二级菜单C',
           url: '#C'
         },{
           title: '二级菜单D',
           url: '#D'
         }]
       }]
    },
    selecteItem(item){
       this.$refs.slider.selecteItem(item)
    },
    toggle(){
        this.data.uniqueOpened=!this.data.uniqueOpened;
        this.data.title=this.data.uniqueOpened ? '不收起其他菜单':'收起其他菜单';
    }
});

API

Classes

JRSidebar

Constants

Component

JRSidebar

Functions

config()
select(item) 选择某一菜单(item) ⇒ void

JRSidebar

Kind: global class
Extend: Component

new JRSidebar()

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.showRetract] boolean true => 是否显示收起项
[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.pageKey] string "\"title\"" => 二级菜单的字段key名
[options.data.moduleKey] string "'module'" => 菜单结构中的模块key名
[options.data.childrenKey] string "\"children\"" => 一级菜单对象下二级菜单数组的key名
[options.data.menus[index].icon] string => 菜单是否有icon，不填写则不显示
[options.data.menus[index].open] string => 是否选择当前菜单

Component

JRSidebar

Kind: global constant

Author: sensen(rainforest92@126.com)

config()

Kind: global function
Access: protected

select(item) 选择某一菜单(item) ⇒ void

Kind: global function
Access: public

Param Type Description
item object 选择项
← 分页 步骤 →