js封装提示框, js写message提示框

一般都用统一的提示样式, 自己写小demo的时候也会去写些杂七杂八的东西, 记录一下

• JavaScript部分

// 提示框
    function message(val) {
        if ($(".message").length == 0) {
            // 定义val的参数
            const { message, type = "success", duration = 2000 } = val;
            // 成功的样式
            // 获取body
            var body = document.body;
            // 创建div
            var div = document.createElement("div");
            var i = document.createElement("i");
            i.classList.add("icon-sv");
            // 获取要提示的文本
            // 把文本添加进刚创建的div里面
            // body里加上这个样式
            div.setAttribute("class", "message");
            // 如果为成功, 就改成成功的样式
            if (type === "success") {
                div.classList.add("success");
                i.classList.add("icon-sv-success");
            } else if (type == "error") {
                div.classList.add("error");
                i.classList.add("icon-sv-error")
            } else if (type == "warning") {
                div.classList.add("warning");
                i.classList.add("icon-sv-warning")
            } else {
                div.classList.add("info");
            }
            div.appendChild(i);
            var text = document.createTextNode(message);
            div.appendChild(text);

            // 把div添加进body里面
            body.appendChild(div);

            // 给个定时器, 两秒钟后关闭, 再删除创建的这个div
            setTimeout(() => {
                // div.style.top = "-45px";
                body.removeChild(div);
            }, duration);
        }
    }

• css部分

/* 提示框样式 */
    .message {
        min-width: 300px;
        max-width: 500px;
        min-height: 45px;
        text-align: center;
        align-items: center;
        padding: 10px 30px;
        box-sizing: border-box;
        margin: auto;
        font-size: 16px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -60px;
        margin-left: -150px;
        transition: all .4s ease;
        z-index: 5000;
        box-shadow: 1px 1px 5px rgb(0 0 0 / 20%);
        border-radius: 2px;
    }

    .message i {
        margin-right: 10px;
    }

    .success {
        background-color: #f7fbef;
        color: #63c339;
    }

    .error {
        background-color: #fff3f7;
        color: #f76d6b;
    }

    .warning {
        background-color: #fdf6ec;
        color: #e6a23c;
    }

    .info{
        background-color: #000;
        color: #fff;
        opacity: .5;
    }

• 使用示例

message({
    message: "message提示消息",
    type: "info",
    duration: 2000
})

也可以把css部分放进js部分, 由js去添加css, 不过懒得弄了, 就这样吧