Message即时消息模块

2024-07-02 11:14:03首发，4周前更新

Message模块用于实时显示状态信息，包括success、error、information、question、warning等；支持大图标大标题模式以突出显示内容；支持9个显示位置；支持html文本。

ax.Message即时消息模块(class类)详细使用方法和诸多示例 需5金币 4周前更新 Message即时消息模块 4周前更新

简单使用

即时消息模块通常不会单独使用，所以他不能对节点以ax-message属性的形式运行，也没有对应的webcomponent组件，运行方式只有一种，即以new的形式运行。

new模块之后，表示即时消息实例创建，但是默认没有显示，需要使用show()方法才会划出。

默认主题颜色是info，表示信息通知。

输出
HTML
JS

```
                
                
            
```

                
                demo01.onclick=()=>{
                    new ax.Message({
                        content:'简单的提示'
                    }).show();
                }

立即显示

立即显示的方法除了创建示例后使用show方法，还可以通过设置参数eager:true来实现。

输出
HTML
JS

```
                
                
            
```

                
                demo41.onclick=()=>{
                    new ax.Message({
                        content:'简单的提示',
                        eager:true,
                    });
                }

所在位置

即时消息小窗默认位置是在顶部中间，即center-top，使用placement参数设定即时消息所在位置，可设置值如下：left-top、center-top、right-top、left-center、center、right-center、left-bottom、center-bottom、right-bottom。

输出
HTML
JS

```
                
                
            
```

                
                LT.onclick=()=>{
                    new ax.Message({content:'left-top',placement:'left-top'}).show();
                }
                CT.onclick=()=>{
                    new ax.Message({content:'center-top',placement:'center-top'}).show();
                }
                RT.onclick=()=>{
                    new ax.Message({content:'right-top',placement:'right-top'}).show();
                }
                LC.onclick=()=>{
                    new ax.Message({content:'left-center',placement:'left-center'}).show();
                }
                CC.onclick=()=>{
                    new ax.Message({content:'center',placement:'center'}).show();
                }
                RC.onclick=()=>{
                    new ax.Message({content:'right-center',placement:'right-center'}).show();
                }
                LB.onclick=()=>{
                    new ax.Message({content:'left-bottom',placement:'left-bottom'}).show();
                }
                CB.onclick=()=>{
                    new ax.Message({content:'center-bottom',placement:'center-bottom'}).show();
                }
                RB.onclick=()=>{
                    new ax.Message({content:'right-bottom',placement:'right-bottom'}).show();
                }

基础显示配置

属性	类型	默认值	说明
heading	string/boolean	''	标题文本
content	string/boolean	''	消息内容
classes	string	''	自定义样式类
placement	'left-top'/'center-top'/'right-top'/'left-center'/'center'/'right-center'/'left-bottom'/'center-bottom'/'right-bottom'	'center-top'	弹出位置
zIndex	number	0	消息层级

状态配置

属性	类型	默认值	说明
status	'succ'/'error'/'issue'/'info'/'warn'	'info'	消息状态类型
iconShow	boolean	false	是否显示状态图标
notable	boolean	false	是否使用突出风格

行为配置

属性	类型	默认值	说明
delay	number	3000	自动关闭延时(ms)
progress	boolean	true	是否显示倒计时进度条
closable	boolean	true	是否显示关闭按钮
manual	boolean	false	是否手动关闭
eager	boolean	false	是否立即展示

回调函数

属性	类型	默认值	说明
onShown	function	null	消息显示后回调
onHidden	function	null	消息关闭后回调