jquery实现自定义消息提示组件

目录结构

message

icon
- error.svg
- warning.svg
- success.svg
- normal.svg
index.css
index.js
index.html

效果图

在这里插入图片描述

配置项

close:false,
actionFns:null,
message:‘’,
boxClass:‘’,
iconClass:‘’,
endClass:‘’,
textClass:‘’,
endHtml:‘’,
placement:‘top’
time:4000
parent:‘body’
提供四种基础样式
- 默认：default
- 成功：success
- 警告：warning
- 失败：error

代码

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./index.css" rel="stylesheet" type="text/css"  />
</head>
<body>
    
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="./index.js"></script>
    <script>javascript">
        yhmessage('test',{
            close:true,
            placement:'center'
        })
        // yhmessage.error('error')
        // yhmessage.success('success')
        yhmessage.warning('warning')
    </script>
</body>

</html>

index.css

css">.yh-message{
    display: flex;
    justify-content: space-between;
    position: fixed;
    min-width: 640px;
    height: 40px;
    border: 1px solid;
    border-radius: 4px;
    align-items: center;
    padding: 12px 16px;
    box-sizing: border-box;
    left: 50%;
    transform: translateX(-50%);
    color: #262626;
}

.yh-message .messager-content{
    display: flex;
    align-items: center;
}

.yh-message.top{
    top: 24px;
}
.yh-message.bottom{
    bottom: 24px;
}

.yh-message.center{
    top: 50%;
    transform: translate(-50%,-50%);
}

.yh-message .close{
    cursor: pointer;
    color: #8C8C8C;
}

.yh-message .icon{
    margin-right: 8px;
    width: 16px;
    height: 16px;
    display: inline-block;
}

.yh-message .icon.normal{
    background: url(./icon/normal.svg) no-repeat;
}

.yh-message .message_close{
    width: 12px;
    height: 12px;
    display: inline-block;
    background: url(./icon/close.svg) no-repeat;
    cursor: pointer;
}

.yh-message .icon.warning{
    background: url(./icon/warning.svg) no-repeat;
}

.yh-message .icon.error{
    background: url(./icon/error.svg) no-repeat;
}

.yh-message .icon.success{
    background: url(./icon/success.svg) no-repeat;
}

.yh-message.yh-message-default{
    border-color: #00C2CE;
    background-color: rgba(0, 194, 206, 0.1);
}

.yh-message.yh-message-success{
    border-color: #0EC885;
    background-color: rgba(14, 200, 133, 0.1);
}

.yh-message.yh-message-warning{
    border-color: #FAAD10;
    background-color: rgba(250, 173, 16, 0.1);
}

.yh-message.yh-message-error{
    border-color: #EF5615;
    background-color: rgba(239, 86, 21, 0.1);
}

index.js


(function(){
    var id = 0;
    var all = {};
    var DEFAULTS = {
        type:'default',
        close:false,
        actionFns:null,                     
        message:'',   
        boxClass:'',    
        iconClass:'normal',
        endClass:'',      
        textClass:'',               
        endHtml:'',                                     
        placement:'top',
        time:1000,
        parent:'body' ,
    };
    var template = '<div class="yh-message yh-message-{type} {placement}"><div class="messager-content"></div><div class="messager-actions"></div></div>'
    
    var Messager = function(message,options){
        // 如果传进来的是对象则兼容直接为配置项
        if($.isPlainObject(message)) {
            options = message;
            message = options.message;
        }
        var that = this;
        options = that.options = $.extend({},DEFAULTS, options);
        that.id = options.id || (id++);
        // 如果存在相同id，则需要销魂原来的
        var oldMessager = all[that.id];
        if(oldMessager) oldMessager.destroy();
        that.message =  (options.iconClass ? '<span class="icon '+ options.iconClass +'"></span>':'') + (options.textClass ? '<span class="'+ options.textClass +'">'+ message +'</span>':'<span>' + message + '</span>')  ;
        console.log(that.message);
        // 创建元素
        that.$ = $(template.replace('{type}',options.type).replace('{placement}',options.placement)).attr('id',"yh-messager"+that.id);
        that.$.find('.messager-content').append($(that.message));
        // 添加外层盒子类名
        if(options.boxClass) that.$.addClass(options.boxClass);
        // 当前消息框的事件
        var $actions = that.$.find('.messager-actions');
        // 处理删除
        if(options.close){
            options.endHtml = "<span class='message_close'></span>"
            options.actionFns = function(e){
                that.destroy()
            }
        }
        if(options.endHtml){
            var end = $(options.endHtml);
            // 绑定事件
            end.on('click',function(e){
                if($.isFunction(options.actionFns)){
                    options.actionFns.call(this,that)
                }
                e.stopPropagation()
            })
            $actions.append(end)
        }
        // 添加到父级
        $(options.parent).append(that.$);
        all[that.id] = that;
        if(!options.close){
            setTimeout(() => {
                that.destroy()
            }, options.time);
        }
        return that
    }

    // 销毁原来的提示框
    Messager.prototype.destroy = function() {
        var that = this;
        that.$.hide();
        that.$.remove();
        that.$ = null;
        delete all[that.id];
    };

    function init(message,options){
        var msg = (options && options.id && all[options.id]) || new Messager(message, options)
        return msg;
    }

    function initSuccess(message,options){
        options = $.extend({},options,{type:'success' , iconClass:'success'})
        var msg = (options && options.id && all[options.id]) || new Messager(message, options)
        return msg;
    }

    function initWarning(message,options){
        options = $.extend({},options,{type:'warning' , iconClass:'warning'})
        var msg = (options && options.id && all[options.id]) || new Messager(message, options)
        return msg;
    }

    function initError(message,options){
        options = $.extend({},options,{type:'error' , iconClass:'error'})
        var msg = (options && options.id && all[options.id]) || new Messager(message, options)
        return msg;
    }

    $.yhmessage = window.yhmessage = init
    $.yhmessage.success = window.yhmessage.success = initSuccess
    $.yhmessage.warning = window.yhmessage.warning = initWarning
    $.yhmessage.error = window.yhmessage.error = initError

})()