123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <template>
- <a-popover
- v-model="visible"
- trigger="click"
- placement="bottomRight"
- overlayClassName="header-notice-wrapper"
- :getPopupContainer="() => $refs.noticeRef.parentElement"
- :autoAdjustOverflow="true"
- :arrowPointAtCenter="true"
- :overlayStyle="{ width: '300px', top: '50px' }"
- >
- <template slot="content">
- <a-spin :spinning="loading">
- <a-tabs>
- <a-tab-pane tab="通知" key="1">
- <a-list>
- <a-list-item>
- <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
- <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png"/>
- </a-list-item-meta>
- </a-list-item>
- <a-list-item>
- <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
- <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png"/>
- </a-list-item-meta>
- </a-list-item>
- <a-list-item>
- <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
- <a-avatar style="background-color: white" slot="avatar" src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png"/>
- </a-list-item-meta>
- </a-list-item>
- </a-list>
- </a-tab-pane>
- <a-tab-pane tab="消息" key="2">
- 123
- </a-tab-pane>
- <a-tab-pane tab="待办" key="3">
- 123
- </a-tab-pane>
- </a-tabs>
- </a-spin>
- </template>
- <span @click="fetchNotice" class="header-notice" ref="noticeRef">
- <a-badge count="12">
- <a-icon style="font-size: 16px; padding: 4px" type="bell" />
- </a-badge>
- </span>
- </a-popover>
- </template>
- <script>
- export default {
- name: 'HeaderNotice',
- data () {
- return {
- loading: false,
- visible: false
- }
- },
- methods: {
- fetchNotice () {
- if (!this.visible) {
- this.loading = true
- setTimeout(() => {
- this.loading = false
- }, 2000)
- } else {
- this.loading = false
- }
- this.visible = !this.visible
- }
- }
- }
- </script>
- <style lang="css">
- .header-notice-wrapper {
- top: 50px !important;
- }
- </style>
- <style lang="less" scoped>
- .header-notice{
- display: inline-block;
- transition: all 0.3s;
- span {
- vertical-align: initial;
- }
- }
- </style>
|