Toast短消息

2025-07-30 23:52:33首发，1个月前更新

实时显示的简短的消息，自动消失，不可点击和复制

Toast短消息1个月前更新 ax.Message即时消息模块(class类)详细使用方法和诸多示例 需5金币3个月前更新 Message即时消息模块6个月前更新

基本使用方法

有别于Toast和Callout模块，Toast为实时短消息，这类短消息不可复制和点击，并且在延时几秒后自动消失，不会占用页面的空间。

必须通过事件触发才可创建Toast实例，如果需要显示请使用show方法，参数content传入内容。

Output
HTML
JS

```
                
                
            
```

                
                demo0001btn.onclick=()=>{
                    new ax.Toast({content:'Simple toast'}).show();
                }

状态

使用 status 参数来指定消息状态。可选值包括：

succ: 绿色，表示成功或完成
error: 红色，表示错误或失败
info: 黑色，表示常规信息（默认值）
warn: 黄色，表示警告
issue: 橙色，表示问题/疑问

Output
HTML
JS

```
                
                
            
```

                
                demo0005btn01.onclick=()=>{
                    new ax.Toast({content:'Success!',status:'succ'}).show();
                }
                demo0005btn02.onclick=()=>{
                    new ax.Toast({content:'Failure!',status:'error'}).show();
                }
                demo0005btn03.onclick=()=>{
                    new ax.Toast({content:'Information!',status:'info'}).show();
                }
                demo0005btn04.onclick=()=>{
                    new ax.Toast({content:'Warning!',status:'warn'}).show();
                }
                demo0005btn05.onclick=()=>{
                    new ax.Toast({content:'Question!',status:'issue'}).show();
                }

特殊风格

可通过feature参数设置特殊风格，可选值有plain。

Output
HTML
JS

```
                
                
            
```

                
                demo0105btn01.onclick=()=>{
                    new ax.Toast({content:'Success!',status:'succ',feature:'plain'}).show();
                }
                demo0105btn02.onclick=()=>{
                    new ax.Toast({content:'Failure!',status:'error',feature:'plain'}).show();
                }
                demo0105btn03.onclick=()=>{
                    new ax.Toast({content:'Information!',status:'info',feature:'plain'}).show();
                }
                demo0105btn04.onclick=()=>{
                    new ax.Toast({content:'Warning!',status:'warn',feature:'plain'}).show();
                }
                demo0105btn05.onclick=()=>{
                    new ax.Toast({content:'Question!',status:'issue',feature:'plain'}).show();
                }

默认内容

参数content用来设置内容，如果为空将显示默认内容。

Output
HTML
JS

```
                
                
            
```

                
                demo0101btn01.onclick=()=>{
                    new ax.Toast({status:'info'}).show();
                }
                demo0101btn02.onclick=()=>{
                    new ax.Toast({status:'succ'}).show();
                }
                demo0101btn03.onclick=()=>{
                    new ax.Toast({status:'error'}).show();
                }
                demo0101btn04.onclick=()=>{
                    new ax.Toast({status:'issue'}).show();
                }
                demo0101btn05.onclick=()=>{
                    new ax.Toast({status:'warn'}).show();
                }

立即显示

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

Output
HTML
JS

```
                
                
            
```

                
                demo0002btn.onclick=()=>{
                    new ax.Toast({
                        content:'Simple toast',
                        eager:true,
                        delay:300000
                    });
                }

位置

通过参数placement设置toast的所在位置，可选值为：top、center和bottom，默认为bottom。

Output
HTML
JS

```
                
                
            
```

                
                demo0003btn01.onclick=()=>{
                    new ax.Toast({placement:'top'}).show();
                }
                demo0003btn02.onclick=()=>{
                    new ax.Toast({placement:'center'}).show();
                }
                demo0003btn03.onclick=()=>{
                    new ax.Toast({placement:'bottom'}).show();
                }

图标使用

Toast 默认不显示图标。通过设置 iconized 参数可启用图标显示功能。

Output
HTML
JS

```
                
                
            
```

                
                demo0004btn01.onclick=()=>{
                    new ax.Toast({iconized:true,status:'info'}).show();
                }
                demo0004btn02.onclick=()=>{
                    new ax.Toast({iconized:true,status:'succ'}).show();
                }
                demo0004btn03.onclick=()=>{
                    new ax.Toast({iconized:true,status:'error'}).show();
                }
                demo0004btn04.onclick=()=>{
                    new ax.Toast({iconized:true,status:'issue'}).show();
                }
                demo0004btn05.onclick=()=>{
                    new ax.Toast({iconized:true,status:'warn'}).show();
                }

手动显示和关闭

可以先创建Toast实例，再按需显示和关闭。

虽然Toast实例会延时关闭，但不排除用户需要立即关闭，此时可使用hide方法。

Output
HTML
JS

```
                
                
            
```

                
                let ins;
                demo0102btn01.onclick=()=>{
                    if(ins)return;
                    ins = new ax.Toast({
                        content:'Simple toast',
                    });
                }
                demo0102btn02.onclick=()=>{
                    ins && ins.show();
                }
                 demo0102btn03.onclick=()=>{
                    ins && ins.hide();
                }

更新内容和参数

当创建和显示是分离的时候，可以使用updateCont方法更新内容和update方法更新参数。

Output
HTML
JS

```
                
                
            
```

                
                let ins;
                demo0202btn01.onclick=()=>{
                    if(ins)return;
                    ins = new ax.Toast({
                        content:'Simple toast',
                    });
                }
                demo0202btn02.onclick=()=>{
                    ins && ins.show();
                }
                 demo0202btn03.onclick=()=>{
                    ins && ins.updateCont('New content');
                }
                demo0202btn04.onclick=()=>{
                    ins && ins.update({
                        status:'error',
                        iconized:true,
                        placement:'center',
                    });
                }

基础显示配置

属性名	类型	默认值	说明
content	string/boolean	''	Toast 显示内容
classes	string	''	自定义 CSS 类名
placement	'top'/'center'/'bottom'	'bottom'	显示位置
feature	'plain'	''	显示特性
zIndex	number	0	层级 z-index 值

状态配置

属性名	类型	默认值	说明
status	'succ'/'error'/'issue'/'info'/'warn'	'info'	Toast 状态类型
iconized	boolean	false	是否显示图标

行为配置

属性名	类型	默认值	说明
delay	number	3000	自动关闭延迟(毫秒)
eager	boolean	false	是否立即显示

回调函数

属性名	类型	默认值	说明
onShown	function	null	显示后回调
onHidden	function	null	隐藏后回调
onUpdated	function	null	更新后回调
onUpdatedCont	function	null	内容更新后回调