NoticeIcon.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  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>
  33. </a-tab-pane>
  34. <a-tab-pane tab="消息" key="2">
  35. 123
  36. </a-tab-pane>
  37. <a-tab-pane tab="待办" key="3">
  38. 123
  39. </a-tab-pane>
  40. </a-tabs>
  41. </a-spin>
  42. </template>
  43. <span @click="fetchNotice" class="header-notice" ref="noticeRef">
  44. <a-badge count="12">
  45. <a-icon style="font-size: 16px; padding: 4px" type="bell" />
  46. </a-badge>
  47. </span>
  48. </a-popover>
  49. </template>
  50. <script>
  51. export default {
  52. name: 'HeaderNotice',
  53. data () {
  54. return {
  55. loading: false,
  56. visible: false
  57. }
  58. },
  59. methods: {
  60. fetchNotice () {
  61. if (!this.visible) {
  62. this.loading = true
  63. setTimeout(() => {
  64. this.loading = false
  65. }, 2000)
  66. } else {
  67. this.loading = false
  68. }
  69. this.visible = !this.visible
  70. }
  71. }
  72. }
  73. </script>
  74. <style lang="css">
  75. .header-notice-wrapper {
  76. top: 50px !important;
  77. }
  78. </style>
  79. <style lang="less" scoped>
  80. .header-notice{
  81. display: inline-block;
  82. transition: all 0.3s;
  83. span {
  84. vertical-align: initial;
  85. }
  86. }
  87. </style>