@beisen/tita-sidebar

    1.1.9 • Public • Published

    左侧导航组件

    简介

    iTalent通用侧边栏
    

    2. 使用

    初始化

    model = {
        "id":124                       // Number、required、unique
        ,"title":"快速入口"              // String、required
        ,"href":"?iTalentNavId=157"	   // String、required
        ,"iconName":"sys-icon-star"    // String、required
        ,"type":"hash"                 // String、required
        ,"orderId":2                   // Number、required、unique
        ,"code":'home'                 // String
        ,"appId":1                     // Number、required
        ,"status":0					   // Number
        ,isQuickEntry: true            // Boolean、required
        ,"children":[]                 // Array
    }
    this.pageJson = {
        menuArry:[
                    {
                        "id":567890
                        ,"title":"快速入口"
                        ,"href":"?iTalentNavId=157"
                        ,"iconName":"sys-icon-star"
                        ,"type":"hash"
                        ,"orderId":2
                        ,"code":'tita-home'
                        ,"appId":1
                        ,"status":0
                        ,isQuickEntry: true
                        ,"children":[model, model...]
                    },
                    {
                        "id":567890
                        ,"title":"快速入口"
                        ,"href":"?iTalentNavId=157"
                        ,"iconName":"sys-icon-star"
                        ,"type":"hash"
                        ,"orderId":2
                        ,"code":"tita-activity"
                        ,"appId":1
                        ,"status":0
                        ,isQuickEntry: false
                        ,"children":[]
                    }
    
                ]
    }
    
    this.sidebar = new SideBar(this.pageJson);
    

    sidebar className

        报表:sys-icon-baobiao
        动态:sys-icon-dongtai
        工作:sys-icon-gongzuo
        工作台:sys-icon-gongzuotai
        计划:sys-icon-jihua
        绩效:sys-icon-jixiao
        考核:sys-icon-kaohe
        目标:sys-icon-mubiao
        ocean:sys-icon-ocean
        日报:sys-icon-ribao
        首页:sys-icon-souye
        同事:sys-icon-tongshi
        文件:sys-icon-wenjian
        项目:sys-icon-xiangmu
        仪表盘:sys-icon-yibiao
        应用:sys-icon-yingyong
        招聘:sys-icon-zaopin
        职业:sys-icon-zhiye
    
        // 另外在fonts目录下添加了preview目录,方便查看目前左侧导航可用的所有图标
    
    
    • 监听事件
    //监听导航切换宽窄条事件
    this.listenTo(this.sidebar,"layoutChanged",function(resp){
        //console.log(resp)
    });
    
    //监听点击导航事件
    this.listenTo(this.sidebar,"hashChanged",,function(resp){
        //console.log(resp)
    });
    
    
    • 获得导航的宽度
        var menuWidth = this.sidebar.getWidth()
    
    • 提示功能与初始高亮功能
    var countData = [
        "#home"
        ,"#test"
        ,"#test1"
    ];
    
        //导航提示,根据hash来判断哪个导航处于提示状态
    
    this.sidebar.updateNewCount(countData);
    
    //导航高亮,含有二级数据的一级导航高亮无效
    
    - 页面首次加载,定制高亮导航
        // id 和 code 必须有一个非空,且高亮优先级code > id
        this.sidebar.highLightSet({"id":150,"code":null});
    
    - 页面首次加载,不定制高亮
        this.sidebar.highLightSet({"id":'',code:''})
    
    
    • 刷新指定的导航 (可用与更新红点提示)
        var menuItem = {
            "id":124
            ,"title":"快速入口"
            ,"href":"?iTalentNavId=157"
            ,"iconName":"sys-icon-star"
            ,"type":"hash"
            ,"orderId":2
            ,"code":'home'
            ,"appId":1
            ,"status":0
            ,isQuickEntry: true
            ,"children":[]
        }
       this.sidebar.menuItemReload(menuItem)
    

    1.版本

    v0.3.2

    • 解决快速入口中配置一级导航时,点击高亮错误的bug

    v0.3.1

    • 添加底部阴影

    v0.3.0

    • 添加【快速入口】功能
    • 导航高度调整
      • 一级导航高度有50px调整为44px
      • 二级导航高度有40px调整为34px
    • 更新组件的iconfont
      • 添加新图标
      • 在font/v*目录下添加preview目录,方便预览所有导航支持的图标

    v0.2.24

    • 2017年2月之前线上版本

    Keywords

    none

    Install

    npm i @beisen/tita-sidebar

    DownloadsWeekly Downloads

    120

    Version

    1.1.9

    License

    ISC

    Unpacked Size

    11.4 MB

    Total Files

    376

    Last publish

    Collaborators

    • albert-zhang
    • liugenpeng
    • beisencorp
    • lgm
    • neozw