目录结构

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

index.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 = '
'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 ? '':'') + (options.textClass ? ''+ message +'':'' + message + '')  ;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 = ""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})()