notification ant插件 封装notification 防止多个相同的错误提示同时展示 message也一样

import { notification } from 'ant-design-vue'

type NoticeType = 'info' | 'success' | 'error' | 'warning'

// 保证 notification提示不重复

const messageSet = new Set();
let clearTimer: number | undefined;

interface MessageOptions {
    content: string
}
/**
* 封装message 防止多个相同的错误提示同时展示
* @param type message类型
* @param content 文本内容或message 配置 
*/

export function showMessage(type: NoticeType, content: string): MessageType;
export function showMessage(
    type: NoticeType,
    options: MessageOptions,
): MessageType;

export function showMessage(type: NoticeType, content: string) {
    const msg = typeof content === 'string' ? content : content.description || '';
    if (messageSet.has(msg)) {
        return;
    }
    messageSet.add(msg);

    if (clearTimer) {
        window.clearTimeout(clearTimer);
    }

    clearTimer = window.setTimeout(() => {
        messageSet.clear();
        clearTimer = undefined;
    }, 5 * 1000)

    return notification[type](content)
}

使用页面引入即可.

import { showMessage } from '../util/notification.ts' 
showMessage('error',{
        placement: 'top',
        message: '提示',
        description: "请输入正确的用户名",
        top: '40%'
})