@italentjs/italent-header

1.0.75 • Public • Published

#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:[]
	            			}
						}
					]
		}

###版本信息:

Readme

Keywords

none

Package Sidebar

Install

npm i @italentjs/italent-header

Weekly Downloads

890

Version

1.0.75

License

none

Unpacked Size

2.17 MB

Total Files

212

Last publish

Collaborators

  • zhizhi_wang
  • beisencorp
  • lishuai123
  • liugenpeng