将a-drawer修改为notification组件

效果图

源码

<template>
	<div>
		<a-drawer
			placement="right"
			:closable="true"
			width="560"
			:visible="visible"
			:after-visible-change="afterVisibleChange"
			@close="onClose"
			:wrapStyle="{height: '26%', zIndex: 888}"
			:mask="false"
			v-if="notifyData.length"
		>
			<div style="display: flex; flex-direction: column">
				<div class="per-item" v-for="(perData, index) in notifyData" style="padding: 6px 0">
					<div style="display: flex; flex-direction: column">
						<span>
							<a-tag color="red" v-if="perData.type === 1">{{ perData.message }}</a-tag>
							<a-tag color="green" v-else>{{ perData.message }}</a-tag>
							<span style="font-weight: 500; font-size: 15px">
								检查时间：{{ perData.checkTime }}
								隐患点：{{ perData.dangerPlace }}
							</span>
						</span>
						<div style="padding-top: 6px;
								z-index: 9999;
						 	white-space: nowrap;
  						text-overflow: ellipsis;
 								 overflow: hidden;"
								 :title="perData.description">
							隐患描述: {{ perData.description }}
						</div>
					</div>
				</div>
			</div>
		</a-drawer>
	</div>
</template>
 
<script>
import { loadNotifyData } from '../../api/aBus';
export default {
	name: 'notify',
	data() {
		return {
			visible: true,
			notifyData: []
		};
	},
	async mounted() {
		const res = await loadNotifyData();
		if (res.status === 0) {
			console.log('output-> res.data: ', res.data);
			this.notifyData = res.data;
			setTimeout(() => {
				this.onClose()
			}, 8000)
		}
 
	},
	methods: {
		afterVisibleChange(val) {
			console.log('visible', val);
		},
		showDrawer() {
			this.visible = true;
		},
		onClose() {
			this.visible = false;
		},
	}
 
};
</script>
 
 
<style scoped>
 
</style>