1 | #iTalent-header通用头部组件
|
2 |
|
3 | ###组件名称:
|
4 | iTalent-header
|
5 | ###组件使用
|
6 | this.header = new Header(json)
|
7 | ###组件功能
|
8 | 按照功能划分,图标按钮支持如下:
|
9 | (I)企业LOGO展示
|
10 |
|
11 | (II)用户自定义操作按钮
|
12 | 1.搜索:Search
|
13 | 2.产品列表:HomePage
|
14 | 3.通知:Message
|
15 | 4.待办:Todos
|
16 | 5.换肤:Skin
|
17 | 6.设置:Settings
|
18 | 7.升级公告:Upgrade
|
19 |
|
20 | 在配置图标按钮数据时,type字段的值,#必须是以上列表中得一个。
|
21 | icon-font对应的className:
|
22 | 通知:header-iconcus-xiaoxi
|
23 | 搜索:header-iconcus-sousuo
|
24 | 产品:header-iconcus-chanpin
|
25 | 待办:header-iconcus-daiban
|
26 | 换肤:header-iconcus-huanfu
|
27 | 设置:header-iconcus-shezhi
|
28 | 升级公告:header-iconcus-upgrade
|
29 |
|
30 |
|
31 | ”通知“下拉菜单可能的取值:
|
32 | @我:header-icon-at-me
|
33 | @部门动态:header-icon-at-department
|
34 | @公告:header-icon-at-notice
|
35 | @项目:header-icon-at-project
|
36 | @团队:header-icon-at-team
|
37 | 新回复:header-icon-reply
|
38 | @工作通知:header-icon-work-notice
|
39 | 团队通知:header-icon-team-notice
|
40 | 招聘:header-icon-recruit
|
41 | 新粉丝:header-icon-fans
|
42 | 收赏:header-icon-in-reward
|
43 | 打赏:header-icon-ex-reward
|
44 |
|
45 | ###依赖数据
|
46 |
|
47 | this.headerJson = {
|
48 | companyInfo:{
|
49 | logo:"http://proto.beisen.co/prototype-v2/app/images/header/logo.png"
|
50 | ,name:"北森集团"
|
51 | ,href:"www.beisen.com"
|
52 | }
|
53 | ,userInfo:{
|
54 | name : "张三张三",
|
55 | avatar: {
|
56 | color:"#f0c75a"
|
57 | ,hasAvatar:false
|
58 | ,small:"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_s.png"
|
59 | }
|
60 | }
|
61 | ,userInfoDropDown:[
|
62 | {
|
63 | title:"个人主页"
|
64 | ,href:"javascript:void(0)"
|
65 | ,target:"_self"
|
66 | }
|
67 | ,{
|
68 | title:"编辑简档"
|
69 | ,href:"javascript:void(0)"
|
70 | ,target:"_self"
|
71 | }
|
72 | ,{
|
73 | title:"个人设置"
|
74 | ,href:"javascript:void(0)"
|
75 | ,target:"_self"
|
76 | }
|
77 | ,{
|
78 | title:"退出登录"
|
79 | ,href:"javascript:void(0)"
|
80 | ,target:"_self"
|
81 | }
|
82 |
|
83 | ]
|
84 | ,oprBtn:[
|
85 | {
|
86 | type:'Search'
|
87 | ,iconName:"header-iconcus-sousuo"
|
88 | ,id:""
|
89 | ,title:"搜索"
|
90 | ,href:"javascript:void(0)"
|
91 | ,reminds:{ //关于新消息
|
92 | remindCount: 0//是否有最新消息,默认0代表没有最新消息
|
93 | ,viewAllHref:"#"//查看全部的地址
|
94 | ,remindList:[]
|
95 | }
|
96 | }
|
97 | ,{
|
98 | type:'HomePage'
|
99 | ,iconName:"header-iconcus-chanpin"
|
100 | ,id:""
|
101 | ,title:"首页"
|
102 | ,href:"#home"
|
103 | ,reminds:{ //关于新消息
|
104 | remindCount: 0//是否有最新消息,默认0代表没有最新消息
|
105 | ,viewAllHref:"#"//查看全部的地址
|
106 | ,remindList:[]
|
107 | }
|
108 | }
|
109 | ,{
|
110 | type:'Message'
|
111 | ,iconName:"header-iconcus-xiaoxi"
|
112 | ,id:""
|
113 | ,title:"通知"
|
114 | ,href:"javascript:void(0)"
|
115 | ,reminds:{ //关于新消息
|
116 | remindCount:3//是否有最新消息,默认0代表没有最新消息
|
117 | ,viewAllHref:"#"//查看全部的地址
|
118 | ,remindList:[
|
119 | {
|
120 | content:"@部门动态"
|
121 | ,date:"5分钟前"
|
122 | ,length:8
|
123 | ,className:"header-iconcus-tongzhi"
|
124 | ,href:"#"
|
125 | }
|
126 | ,{
|
127 | content:"回复我的"
|
128 | ,date:"5分钟前"
|
129 | ,length:12
|
130 | ,className:"header-iconcus-huifu"
|
131 | ,href:"#"
|
132 | }
|
133 | ,{
|
134 | content:"收赏"
|
135 | ,date:"5分钟前"
|
136 | ,length:12
|
137 | ,className:"header-iconcus-shoushang"
|
138 | ,href:"#"
|
139 | }
|
140 | ]
|
141 | }
|
142 | }
|
143 | ,{
|
144 | type:'Todos'
|
145 | ,iconName:"header-iconcus-daiban"
|
146 | ,id:""
|
147 | ,title:"待办"
|
148 | ,href:"javascript:void(0)"
|
149 | ,reminds:{ //关于新消息
|
150 | remindCount: 32//是否有最新消息,默认0代表没有最新消息
|
151 | ,viewAllHref:"#"//查看全部的地址
|
152 | ,remindList:[
|
153 | {
|
154 | userName:"张庆华"
|
155 | ,teskName:"请你负责任务"
|
156 | ,date:"5分钟前"
|
157 | ,taskContent:"视觉设计验收任务统计视觉设计验收任务统计视觉"
|
158 | ,href:"#"
|
159 | ,avatar: {
|
160 | color:"#f0c75a"
|
161 | ,hasAvatar:true
|
162 | ,small:"http://cache.tita.com/Image/110006/2e5c56760f494679b1c94234f89539a6_m.png"
|
163 | }
|
164 | }
|
165 | ,{
|
166 | userName:"孔常柱"
|
167 | ,teskName:"请你审批任务"
|
168 | ,date:"5分钟前"
|
169 | ,taskContent:"视觉设计验收任务统设计验收任务统计计视觉设计验收任务统计视设计验收任务统计觉设计验收任务统计"
|
170 | ,href:"#"
|
171 | ,avatar: {
|
172 | color:"#f0c75a"
|
173 | ,hasAvatar:true
|
174 | ,small:"http://cache.tita.com/Image/110006/b4bc3d7696e74345b3ee3cd88cd1538f_m.png"
|
175 | }
|
176 | }
|
177 | ,{
|
178 | userName:"郭美山"
|
179 | ,userPic:"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_m.png"
|
180 | ,date:"5分钟前"
|
181 | ,taskContent:"视觉设计验收任务统计"
|
182 | ,href:"#"
|
183 | ,avatar: {
|
184 | color:"#f0c75a"
|
185 | ,hasAvatar:true
|
186 | ,small:"http://cache.tita.com/Image/110006/324d5a07a3984689a6a5304d13902567_s.png"
|
187 | }
|
188 | }
|
189 |
|
190 | ]
|
191 | }
|
192 | }
|
193 | ,{
|
194 | type:'Skin'
|
195 | ,iconName:"header-iconcus-huanfu"
|
196 | ,id:""
|
197 | ,title:"换肤"
|
198 | ,href:"javascript:void(0)"
|
199 | ,reminds:{ //关于新消息
|
200 | remindCount: 0//是否有最新消息,默认0代表没有最新消息
|
201 | ,viewAllHref:"#"//查看全部的地址
|
202 | ,remindList:[]
|
203 | }
|
204 | }
|
205 | ]
|
206 | }
|
207 |
|
208 |
|
209 | ###版本信息:
|