blog/blog-admin.git

inleft

2022-02-09 9bcb19959eeb9da9bde2561e7278f6d0a55eb151

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>