blog的后端代码
view | history | commit | commitdiff
inleft
2022-02-15 91dc6cdda0548ff7f6e473a81933fa206d912cef
commit | author | age
9bcb19 1 <template>
I 2   <a-popover
3     v-model="visible"
4     trigger="click"
5     placement="bottomRight"
6     overlayClassName="header-notice-wrapper"
7     :getPopupContainer="() => $refs.noticeRef.parentElement"
8     :autoAdjustOverflow="true"
9     :arrowPointAtCenter="true"
10     :overlayStyle="{ width: '300px', top: '50px' }"
11   >
12     <template slot="content">
13       <a-spin :spinning="loading">
14         <a-tabs>
15           <a-tab-pane tab="通知" key="1">
16             <a-list>
17               <a-list-item>
18                 <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
19                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
20                 </a-list-item-meta>
21               </a-list-item>
22               <a-list-item>
23                 <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
24                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
25                 </a-list-item-meta>
26               </a-list-item>
27               <a-list-item>
28                 <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
29                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
30                 </a-list-item-meta>
31               </a-list-item>
32               <a-list-item>
33                 <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
34                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
35                 </a-list-item-meta>
36               </a-list-item>
37               <a-list-item>
38                 <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
39                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
40                 </a-list-item-meta>
41               </a-list-item>
42             </a-list>
43           </a-tab-pane>
44           <a-tab-pane tab="消息" key="2">
45             <a-list>
46               <a-list-item>
47                 <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
48                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
49                 </a-list-item-meta>
50               </a-list-item>
51               <a-list-item>
52                 <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
53                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
54                 </a-list-item-meta>
55               </a-list-item>
56               <a-list-item>
57                 <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
58                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
59                 </a-list-item-meta>
60               </a-list-item>
61             </a-list>
62           </a-tab-pane>
63           <a-tab-pane tab="待办" key="3">
64             <a-list>
65               <a-list-item>
66                 <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
67                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
68                 </a-list-item-meta>
69               </a-list-item>
70               <a-list-item>
71                 <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
72                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
73                 </a-list-item-meta>
74               </a-list-item>
75               <a-list-item>
76                 <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
77                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
78                 </a-list-item-meta>
79               </a-list-item>
80               <a-list-item>
81                 <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
82                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
83                 </a-list-item-meta>
84               </a-list-item>
85               <a-list-item>
86                 <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
87                   <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
88                 </a-list-item-meta>
89               </a-list-item>
90             </a-list>
91           </a-tab-pane>
92         </a-tabs>
93       </a-spin>
94     </template>
95     <span @click="fetchNotice" class="header-notice" ref="noticeRef" style="padding: 0 18px">
96       <a-badge count="12">
97         <a-icon style="font-size: 16px; padding: 4px" type="bell" />
98       </a-badge>
99     </span>
100   </a-popover>
101 </template>
102
103 <script>
104 export default {
105   name: 'HeaderNotice',
106   data () {
107     return {
108       loading: false,
109       visible: false
110     }
111   },
112   methods: {
113     fetchNotice () {
114       if (!this.visible) {
115         this.loading = true
116         setTimeout(() => {
117           this.loading = false
118         }, 100)
119       } else {
120         this.loading = false
121       }
122       this.visible = !this.visible
123     }
124   }
125 }
126 </script>
127
128 <style lang="css">
129   .header-notice-wrapper {
130     top: 50px !important;
131   }
132 </style>
133 <style lang="less" scoped>
134   .header-notice{
135     display: inline-block;
136     transition: all 0.3s;
137
138     span {
139       vertical-align: initial;
140     }
141   }
142 </style>