Ant Design Vue notification自定义

<script setup>
import { onMounted, h, ref, watch, getCurrentInstance } from 'vue';
import { notification, Button } from 'ant-design-vue';
onMounted(() => {
const list = [{id: '11',warnLevel: '严重',...},...]showMessage(list);
});
function showMessage(){
for (const item of list) {const index = shownNotifications.findIndex((key) => key.id === item.id);if (index === -1) {const btn = () =>h('div',{class: 'notification-btn-wrapper', // 使用类名},[h(Button,{type: 'primary',size: 'small',onClick: () => handleConfirm(item),},{ default: () => '确认' }),]);notification.open({message: '门架交易数据异常',description: h('div', {}, [h('div', { class: 'ct-div' }, [h('div',[h('div', { class: 'label' }, '发生时间'),h('div', { class: 'value' }, item.statisticalDate)]),h('div',[h('div', { class: 'label' }, '预警级别'),h('div', { class: `value ${item.warnLevel === '严重' ? 'warnLevel' : ''}` }, item.warnLevel)]),]),h('div', { class: 'label' }, '异常描述'),h('div', { class: 'value warnDesc' }, item.warnDesc)]),btn,bottom: '10px',key: item.id,duration: null,placement: 'bottomRight',class: 'notification-custom-class',onClose: () => handleClose(item),});setShownNotifications(item.id);}}
}</script>

<style  lang="less">
.notification-custom-class {padding: 0;box-sizing: border-box;border-radius: 8px;.ant-notification-notice-content {.ant-notification-notice-message {height: 32px;border-bottom: 1px solid #0000000F;display: flex;align-items: center;padding-left: 10px;box-sizing: border-box;margin-bottom: 0;color: #262626;font-family: PingFang SC;font-weight: bold;font-size: 14px;}.ant-notification-notice-description {padding: 5px 10px;box-sizing: border-box;}.label {color: #00000072;font-family: PingFang SC;font-weight: 500;font-size: 12px;line-height: 22px;margin-bottom: 2px;}.value {opacity: 1;color: #262626;font-family: PingFang SC;font-weight: 500;font-size: 12px;line-height: 22px;margin-bottom: 2px;&:last-child {margin-bottom: 0;}}.ct-div {display: flex;align-items: center;> div {flex: 1;margin-right: 10px;&:last-child {margin-right: 0;}}}.warnDesc {height: 60px;overflow-y: auto;}.warnLevel {color: #FF0000;font-weight: bold;}}.ant-notification-notice-btn {height: 32px;width: 100%;display: flex;justify-content: center;align-items: center;opacity: 1;margin-top: 0;border-top: 1px solid #0000000F;.notification-btn-wrapper {width: 100%;display: flex;justify-content: center;align-items: center;}}.ant-notification-notice-close {top: 7px;}
}
</style>