将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>
学而不思则罔,思而不学则殆!