Message 即时消息

简介

即时消息通常用在系统报错和表单提示中，是开发管理系统中必然使用的插件。

使用方法

插件运行方式只有一种：

js实例：通过new axMessage({参数})方式创建实例运行。

默认参数

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnDft">默认参数</a>

                                            let btnDft = document.querySelector('#btnDft');
                                            btnDft.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                });
                                            }

位置

通过设定placement参数来改变信息窗口弹出的位置。

left-top center-top right-top

left-center center-center right-center

left-bottom center-bottom right-bottom

HTML JS

                                    <a href="###" class="ax-btn ax-primary" id="btnLT">left-top</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnCT">center-top</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnRT">right-top</a>

                                    <a href="###" class="ax-btn ax-primary" id="btnLC">left-center</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnCC">center-center</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnRC">right-center</a>

                                    <a href="###" class="ax-btn ax-primary" id="btnLB">left-bottom</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnCB">center-bottom</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnRB">right-bottom</a>

                                            let btnLT = document.querySelector('#btnLT');
                                            btnLT.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'left-top',
                                                });
                                            }
                                            let btnCT = document.querySelector('#btnCT');
                                            btnCT.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'center-top',
                                                });
                                            }
                                            let btnRT = document.querySelector('#btnRT');
                                            btnRT.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'right-top',
                                                });
                                            }
                                
                                            let btnLC = document.querySelector('#btnLC');
                                            btnLC.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'left-center',
                                                });
                                            }
                                            let btnCC = document.querySelector('#btnCC');
                                            btnCC.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'center-center',
                                                });
                                            }
                                            let btnRC = document.querySelector('#btnRC');
                                            btnRC.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'right-center',
                                                });
                                            }
                                
                                            let btnLCB = document.querySelector('#btnLB');
                                            btnLB.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'left-bottom',
                                                });
                                            }
                                            let btnCB = document.querySelector('#btnCB');
                                            btnCB.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'center-bottom',
                                                });
                                            }
                                            let btnRB = document.querySelector('#btnRB');
                                            btnRB.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    placement:'right-bottom',
                                                });
                                            }

风格

通过设置style参数来改变消息窗口风格，默认是simple，可选择complex。

simple风格 complex风格

HTML JS

                                    <a href="###" class="ax-btn ax-primary" id="btnSPL">simple风格</a>
                                    <a href="###" class="ax-btn ax-primary" id="btnCPL">complex风格</a>

                                            let btnSPL = document.querySelector('#btnSPL');
                                            btnSPL.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    style:'simple',
                                                });
                                            }
                                            let btnCPL = document.querySelector('#btnCPL');
                                            btnCPL.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    style:'complex',
                                                });
                                            }

使用图标

通过设置iconShow参数控制是否显示图标。默认false不显示，可设置true显示。

simple风格的图标 complex风格的图标

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnIconS">simple风格的图标</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnIconC">complex风格的图标</a>

                                            let btnIconS = document.querySelector('#btnIconS');
                                            btnIconS.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    style:'simple',
                                                    iconShow:true,
                                                });
                                            }
                                            let btnIconC = document.querySelector('#btnIconC');
                                            btnIconC.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    style:'complex',
                                                    iconShow:true,
                                                });
                                            }

结果

信息提示一共有五个结果，通过result参数设置结果类型，分别是success、error、warning、info（默认）和question

success error warning info question

success(complex) error(complex) warning(complex) info(complex) question(complex)

HTML JS

<a href="###" class="ax-btn ax-primary" id="btnSuccess">success</a>
<a href="###" class="ax-btn ax-primary" id="btnError">error</a>
<a href="###" class="ax-btn ax-primary" id="btnWarning">warning</a>
<a href="###" class="ax-btn ax-primary" id="btnInfo">info</a>
<a href="###" class="ax-btn ax-primary" id="btnQuestion">question</a>
<a href="###" class="ax-btn ax-primary" id="btnSuccessC">success(complex)</a>
<a href="###" class="ax-btn ax-primary" id="btnErrorC">error(complex)</a>
<a href="###" class="ax-btn ax-primary" id="btnWarningC">warning(complex)</a>
<a href="###" class="ax-btn ax-primary" id="btnInfoC">info(complex)</a>
<a href="###" class="ax-btn ax-primary" id="btnQuestionC">question(complex)</a>

            let btnSuccess = document.querySelector('#btnSuccess');
             btnSuccess.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'success',
                    iconShow:true,
                });
            }
            let btnError = document.querySelector('#btnError');
            btnError.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'error',
                    iconShow:true,
                });
            }
            let btnWarning = document.querySelector('#btnWarning');
            btnWarning.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'warning',
                    iconShow:true,
                });
            }
            let btnInfo = document.querySelector('#btnInfo');
            btnInfo.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'info',
                    iconShow:true,
                });
            }
            let btnQuestion = document.querySelector('#btnQuestion');
            btnQuestion.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    result: 'question',
                    iconShow:true,
                });
            }
            let btnSuccessC = document.querySelector('#btnSuccessC');
             btnSuccessC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'success',
                    iconShow:true,
                });
            }
            let btnErrorC = document.querySelector('#btnErrorC');
            btnErrorC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'error',
                    iconShow:true,
                });
            }
            let btnWarningC = document.querySelector('#btnWarningC');
            btnWarningC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'warning',
                    iconShow:true,
                });
            }
            let btnInfoC = document.querySelector('#btnInfoC');
            btnInfoC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'info',
                    iconShow:true,
                });
            }
            let btnQuestionC = document.querySelector('#btnQuestionC');
            btnQuestionC.onclick = function () {
                new axMessage({
                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                    style:'complex',
                    result: 'question',
                    iconShow:true,
                });
            }

关闭

默认自动关闭，如果需要可使用手动关闭。通过设置close参数控制是否手动关闭。默认false自动，可设置true手动。

自动关闭手动关闭

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnAuto">自动关闭</a>
                                            <a href="###" class="ax-btn ax-primary" id="btnManu">手动关闭</a>

                                            let btnAuto = document.querySelector('#btnAuto');
                                            btnAuto.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                });
                                            }
                                            let btnManu = document.querySelector('#btnManu');
                                            btnManu.onclick = function () {
                                                new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    close:true,
                                                });
                                            }

监听事件

本插件有若干监听方法，以on为关键字，实例后监听和在参数中监听效果相同。格式是：instance.on('event',function(){})；具体事件说明如下：

shown 窗口显示后执行
hidden 窗口隐藏后执行

演示实例显示结果使用了console.log方法，请按下F12按键打开开发者工具中的“控制台”查看监听效果。

监听

HTML JS

                                            <a href="###" class="ax-btn ax-primary" id="btnOn">监听</a>

                                            let btnOn = document.querySelector('#btnOn');
                                            btnOn.onclick = function () {
                                                instanceOn = new axMessage({
                                                    content: '中华人民共和国，中央人民政府，今天成立啦！',
                                                    close: true,
                                                }).on('shown', function () {
                                                    console.log('已经显示了');
                                                }).on('hidden', function () {
                                                    console.log('已经隐藏了');
                                                });
                                            }

参数选项

document.addEventListener("DOMContentLoaded", function() {
      var demo1 = new axMessage({
        className: '',//自定义类名，默认为空，注意不需要使用‘.’
        placement: 'center-top',//弹出位置，默认中间顶部，可选择left-top|center-top|right-top|left-center|center-center|right-center|left-bottom|center-bottom|right-bottom
        content: '',//窗口内容，如果为空则插件根据窗口类型自动填入内容，可自定义窗口内容
        result: 'info',//操作状态，默认提示info，可选择success|error|question|warning
        delay: 3000,//延迟关闭时间
        progress: true,//是否显示关闭进度条，仅在complex风格中使用，默认为true
        title: {//设置标题名称，如果simple风格中有内容则不会显示标题，如果没有内容则显示标题
            warning: '操作警告！',
            success: '操作成功！',
            error: '操作失败！',
            question: '操作疑问！',
            info: '信息提示！',
        },
        close: false,//是否显示关闭按钮，默认不显示将自动关闭窗口，可选择true，使用手动点击按钮关闭窗口
        iconShow: false,//是否显示状态图标，默认不显示，可选择true
        style: 'simple',//窗口风格，默认简单风格simple，可选择复杂风格complex
      });
});

操作方法

名称	说明	参数说明	回调函数
init()	初始化	无参数	无回调函数
on(type, handler)	添加监听事件	type是监听事件，事件类型可看前文的：监听方法；handler是回调函数	function(){} 无参数

在回调函数中this均指向实例本身，所以在回调函数中可默认使用如下变量：

this：实例本身
this.targetDom：实例的Dom
this.options：实例的参数