@beisen/tita-header

tita header

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen/tita-header
Minified + gzip package size for @beisen/tita-header in KB

Readme

#iTalent-header通用头部组件

###组件名称: iTalent-header ###组件使用 this.header = new Header(json) ###组件功能 按照功能划分,图标按钮支持如下: (I)企业LOGO展示

(II)用户自定义操作按钮
    1.搜索:Search
    2.产品列表:HomePage
    3.通知:Message
    4.待办:Todos
    5.换肤:Skin
    6.设置:Settings
    7.升级公告:Upgrade

    在配置图标按钮数据时,type字段的值,#必须是以上列表中得一个。
    icon-font对应的className:
        通知:header-iconcus-xiaoxi
        搜索:header-iconcus-sousuo
        产品:header-iconcus-chanpin
        待办:header-iconcus-daiban
        换肤:header-iconcus-huanfu
        设置:header-iconcus-shezhi
        升级公告:header-iconcus-upgrade

        
    ”通知“下拉菜单可能的取值:
        @我:header-icon-at-me 
        @部门动态:header-icon-at-department
        @公告:header-icon-at-notice
        @项目:header-icon-at-project
        @团队:header-icon-at-team
        新回复:header-icon-reply 
        @工作通知:header-icon-work-notice
        团队通知:header-icon-team-notice
        招聘:header-icon-recruit
        新粉丝:header-icon-fans
        收赏:header-icon-in-reward
        打赏:header-icon-ex-reward

###依赖数据

this.headerJson = {
            companyInfo:{
                logo:"http://proto.beisen.co/prototype-v2/app/images/header/logo.png"
                ,name:"北森集团"
                ,href:"www.beisen.com"
            }
            ,userInfo:{
                name : "张三张三",
                avatar: {
                    color:"#f0c75a"
                    ,hasAvatar:false
                    ,small:"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_s.png"
                }
            }
            ,userInfoDropDown:[
                            {
                                title:"个人主页"
                                ,href:"javascript:void(0)"
                                ,target:"_self"
                            }
                            ,{
                                title:"编辑简档"
                                ,href:"javascript:void(0)"
                                ,target:"_self"
                            }
                            ,{
                                title:"个人设置"
                                ,href:"javascript:void(0)"
                                ,target:"_self"
                            }
                            ,{
                                title:"退出登录"
                                ,href:"javascript:void(0)"
                                ,target:"_self"
                            }

                        ]
            ,oprBtn:[
                        {
                            type:'Search'
                            ,iconName:"header-iconcus-sousuo"
                            ,id:""
                            ,title:"搜索"
                            ,href:"javascript:void(0)"
                            ,reminds:{  //关于新消息
                                remindCount: 0//是否有最新消息,默认0代表没有最新消息
                                ,viewAllHref:"#"//查看全部的地址
                                ,remindList:[]
                            }
                        }
                        ,{
                            type:'HomePage'
                            ,iconName:"header-iconcus-chanpin"
                            ,id:""
                            ,title:"首页"
                            ,href:"#home"
                            ,reminds:{  //关于新消息
                                remindCount: 0//是否有最新消息,默认0代表没有最新消息
                                ,viewAllHref:"#"//查看全部的地址
                                ,remindList:[]
                            }
                        }
                        ,{
                            type:'Message'
                            ,iconName:"header-iconcus-xiaoxi"
                            ,id:""
                            ,title:"通知"
                            ,href:"javascript:void(0)"
                            ,reminds:{  //关于新消息
                                remindCount:3//是否有最新消息,默认0代表没有最新消息
                                ,viewAllHref:"#"//查看全部的地址
                                ,remindList:[
                                                {
                                                   content:"@部门动态"
                                                   ,date:"5分钟前"
                                                   ,length:8
                                                   ,className:"header-iconcus-tongzhi"
                                                   ,href:"#"
                                                }
                                                ,{
                                                   content:"回复我的"
                                                   ,date:"5分钟前"
                                                   ,length:12
                                                   ,className:"header-iconcus-huifu" 
                                                   ,href:"#"
                                                }
                                                ,{
                                                   content:"收赏"
                                                   ,date:"5分钟前"
                                                   ,length:12
                                                   ,className:"header-iconcus-shoushang" 
                                                   ,href:"#"
                                                }
                                ]    
                            }
                        }
                        ,{
                            type:'Todos'
                            ,iconName:"header-iconcus-daiban"
                            ,id:""
                            ,title:"待办"
                            ,href:"javascript:void(0)"
                            ,reminds:{  //关于新消息
                                remindCount: 32//是否有最新消息,默认0代表没有最新消息
                                ,viewAllHref:"#"//查看全部的地址
                                ,remindList:[
                                        {
                                            userName:"张庆华"
                                            ,teskName:"请你负责任务"
                                            ,date:"5分钟前"
                                            ,taskContent:"视觉设计验收任务统计视觉设计验收任务统计视觉"
                                            ,href:"#"
                                            ,avatar: {
                                                color:"#f0c75a"
                                                ,hasAvatar:true
                                                ,small:"http://cache.tita.com/Image/110006/2e5c56760f494679b1c94234f89539a6_m.png"
                                            }
                                        }
                                        ,{
                                            userName:"孔常柱"
                                            ,teskName:"请你审批任务"
                                            ,date:"5分钟前"
                                            ,taskContent:"视觉设计验收任务统设计验收任务统计计视觉设计验收任务统计视设计验收任务统计觉设计验收任务统计"
                                            ,href:"#"
                                            ,avatar: {
                                                color:"#f0c75a"
                                                ,hasAvatar:true
                                                ,small:"http://cache.tita.com/Image/110006/b4bc3d7696e74345b3ee3cd88cd1538f_m.png"
                                            }
                                        }
                                        ,{
                                            userName:"郭美山"
                                            ,userPic:"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_m.png"
                                            ,date:"5分钟前"
                                            ,taskContent:"视觉设计验收任务统计"
                                            ,href:"#"
                                            ,avatar: {
                                                color:"#f0c75a"
                                                ,hasAvatar:true
                                                ,small:"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_s.png"
                                            }
                                        }
                
                                ]    
                            }
                        }
                        ,{
                            type:'Skin'
                            ,iconName:"header-iconcus-huanfu"
                            ,id:""
                            ,title:"换肤"
                            ,href:"javascript:void(0)"
                            ,reminds:{  //关于新消息
                                remindCount: 0//是否有最新消息,默认0代表没有最新消息
                                ,viewAllHref:"#"//查看全部的地址
                                ,remindList:[]
                            }
                        }
                    ]
        }

###版本信息:

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.