纯JS编写message插件（TS）

逻辑： 利用 document.createElement 实时生成组件插入到 Html 中。

# 用类创建一个实例子。
创建 plugins.ts 文件，写入以下

/** message 消息提示 */
class Message {
    private title?: string | null | undefined;
    private icon?: string;
    private type: "error" | "warning" | "success" | "info";
    private message?: string;
    private duration: number;

    constructor () {
        // 默认值
        this.type = "info";
        this.duration = 3000;
    }

    private open () {
        /** 获取 Message Content */
        const MessageContentWrapper = this._element();
        /** 创建新 message card */
        const MessageElement = document.createElement("div");
        MessageElement.setAttribute("class", `message active`);
        MessageElement.innerHTML = `
            <div class="message-icon ${this.type}">
                <span class="fas ${this.icon}"></span>
            </div>
            <div class="message-content">
                <div class="message-title">${ this.title }</div>
                <div class="message-description">${ this.message }</div>
            </div>
        `
        /** 挂载 */
        MessageContentWrapper.appendChild(MessageElement);
        /** 移除 */
        setTimeout(() => {
            MessageContentWrapper.removeChild(MessageElement);
        }, this.duration);
    }

    public error (title: string, message: string, duration: number = 3000): void {
        this.icon = "fa-remove-circle";
        this.type = "error";
        this._set(title, message, duration)
        this.open()
    }

    public warning (title: string, message: string, duration: number = 3000): void {
        this.icon = "fa-exclamation-circle"
        this.type = "warning"
        this._set(title, message, duration)
        this.open()
    }

    public success (title: string, message: string, duration: number = 3000): void {
        this.icon = "fa-crosshairs"
        this.type = "success"
        this._set(title, message, duration)
        this.open()
    }

    public info (title: string, message: string, duration: number = 3000): void {
        this.icon = "fa-info-circle"
        this.type = "info"
        this._set(title, message, duration)
        this.open()
    }

    private _set (title: string, message: string, duration: number = 3000) {
        this.title = title;
        this.message = message;
        // 600ms 为动画时长;
        this.duration = duration;
    }

    private _element () {
        const Element = document.getElementById("message-content");
        if (Element) {
            return Element;
        }
        const MessageContentElement = document.createElement("div");
        MessageContentElement.setAttribute("id", "message-content");
        document.body.appendChild(MessageContentElement);
        return MessageContentElement
    }
}

export default {
    $message: new Message()
}

方法包含了情景式的交互，可以自行更改 icon，下面开始对组件进行美化

/*注意：这里使用了 css 预处理器*/
#message-content{
    max-width: 330px;
    width: calc(100vw - 50px);
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9998;
    .message{
        width: 100%;
        padding: 15px;
        margin: 0 auto 10px;
        margin-right: -400px;
        transition: margin-right .6s ease;
        background: #ffffff;
        border: 1px solid #ebeef5;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .3);
        display: flex;
        justify-content: flex-start;
        border-radius: 8px;
        &.active{
            margin-right: auto;
            transition: margin-right .6s ease;
        }
        .message-icon{
            font-size: 30px;
            color: var(--black);
            padding-right: 6px;
            &.error{
                color: var(--red)
            }
            &.warning{
                color: var(--yellow)
            }
            &.success{
                color: var(--green)
            }
            &.info{
                color: var(--info)
            }
        }
        .message-content{
            width: calc(100% - 46px);
            .message-title{
                font-size: 16px;
                color: var(--black);
                font-weight: bold;
            }
            .message-description{
                overflow: hidden;
                white-space: normal;
                word-break: break-word;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-size: 13px;
                color: #555666;
            }
        }
    }
}

页面中使用，引用文件

import plugins from './plugins';
plugins.$message.error("错误", "error message");
plugins.$message.success("成功", "success message");

效果