@group_wtf_npm/message/src/GlobalMessage.js

message提示

/**
 * GlobalMessage 类
 *
 * 用于管理全局消息提示的类，支持显示、隐藏、通知等功能。
 */
class GlobalMessage {
    /**
     * 挂载根元素
     * @type {HTMLElement}
     */
    root = document.body;
    tag = null
    /**
     * 用于记录消息实例的 Map
     * @type {Map<string, { msg: string, target: HTMLElement }>}
     */
    record = new Map();

    /**
     * 默认配置项
     * @type {{ tag: string, delay: number }}
     */
    opts = {
        tag: 'wtf-message',
        type: 'info',
        delay: 2,
        showIcon: true,
    };

    /**
     * 构造函数
     * @param {Object} [opts] 配置项
     * @param {HTMLElement|string} [opts.root] 消息挂载的根元素，可以是 DOM 元素或选择器字符串
     * @param {string} [opts.tag='wtf-message'] 自定义消息元素的标签名称
     * @param {number} [opts.delay=2] 消息自动隐藏的延迟时间（单位：秒）
     */
    constructor(opts) {
        const { root } = opts || {};
        Object.assign(this.opts, opts);
        if (root) {
            const is_str = typeof root === 'string';
            this.root = is_str ? document.querySelector(root) : root;
        }
        this.tag = document.createElement('div');
        this.tag.setAttribute('style', 'position:absolute;z-index:200;top:2%;left:50%;transform:translate(-50%,0);');
        this.root.appendChild(this.tag);
    }

    /**
     * 显示消息
     * @param {Object} userOpts 用户配置项
     * @param {string} userOpts.msg 消息内容
     * @param {string} [userOpts.id] 消息的唯一 ID
     * @param {string} [userOpts.tag] 自定义消息元素的标签名称
     * @param {string} [userOpts.type] 消息类型（如 success、error、warn、info）
     * @param {number} [userOpts.delay] 消息自动隐藏的延迟时间（单位：秒）
     * @param {Function} [callback] 消息隐藏后的回调函数
     * @returns {string} 返回消息的唯一 ID
     */
    show = (userOpts, callback) => {
        const opts = Object.assign({}, this.opts, userOpts);
        const { msg, id, tag, type, delay, showIcon } = opts;
        const msg_id = id ?? this.getId(6);

        const target = document.createElement(tag);
        target.setAttribute('showIcon', showIcon);
        target.setAttribute('msgId', msg_id);
        target.setAttribute('type', type);
        target.innerHTML = msg;

        if (delay) {
            const timmer = setTimeout(() => {
                clearTimeout(timmer);
                this.hide(msg_id);
                if (callback) callback();
            }, delay * 1000);
        }

        this.tag.appendChild(target);
        this.record.set(msg_id, { msg, target });
        return msg_id;
    };

    /**
     * 隐藏指定的消息
     * @param {string} id 消息的唯一 ID
     * @returns {void|Error} 如果 ID 无效或消息不存在，则返回错误
     */
    hide = id => {
        if (!id) return new Error('has`t_message_id');
        const item = this.record.get(id);
        const res = this.record.delete(id);
        if (!res) return new Error(`hide_message_fail: ${id}`);
        item.target.setAttribute('style', 'animation:msg_out 0.5s forwards');
        const timmer = setTimeout(() => {
            clearTimeout(timmer);
            this.tag.removeChild(item.target);
        }, 0.5 * 1000);
    };

    /**
     * 通知消息
     * @param {string} type 消息类型（如 success、error、warn、info）
     * @param {string} msg 消息内容
     * @param {Object} [useOpts] 额外的配置项
     * @returns {Promise<void>} 返回一个 Promise，在消息隐藏后 resolve
     */
    notify = (type, msg, useOpts) => {
        return new Promise(resolve => {
            const opts = Object.assign({ type, msg }, useOpts);
            this.show(opts, resolve);
        });
    };

    /**
     * 显示成功消息
     * @param {string} msg 消息内容
     * @param {Object} [useOpts] 额外的配置项
     * @returns {Promise<void>}
     */
    success = (msg, useOpts) => this.notify('success', msg, useOpts);

    /**
     * 显示错误消息
     * @param {string} msg 消息内容
     * @param {Object} [useOpts] 额外的配置项
     * @returns {Promise<void>}
     */
    error = (msg, useOpts) => this.notify('error', msg, useOpts);

    /**
     * 显示警告消息
     * @param {string} msg 消息内容
     * @param {Object} [useOpts] 额外的配置项
     * @returns {Promise<void>}
     */
    warn = (msg, useOpts) => this.notify('warn', msg, useOpts);

    /**
     * 显示信息消息
     * @param {string} msg 消息内容
     * @param {Object} [useOpts] 额外的配置项
     * @returns {Promise<void>}
     */
    info = (msg, useOpts) => this.notify('info', msg, useOpts);

    /**
     * 生成唯一 ID
     * @param {number} [num=6] ID 的长度
     * @returns {string} 返回生成的唯一 ID
     */
    getId = (num = 6) => {
        const str = Math.random().toString(36);
        return [str.slice(-num), Date.now()].join('_');
    };
}

export {
    GlobalMessage,
    GlobalMessage as default
};