Message即时消息模块

2024-07-02 11:14:03首发，3小时前更新

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

简单使用

即时消息模块通常不会单独使用，所以他不能对节点以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();
                }