Alert警告窗

2024-09-19 16:13:08首发，1小时前更新

alert工具函数可以快速的打开一个警告窗，点击confirm才能关闭，可代替原生alert方法

参数

参数名	值类型	默认值	说明
content	string	-	窗口主体内容，通常为纯文本，也支持其他格式，写法同getContent函数的第content属性
contType	string	-	内容类型，写法同getContent函数的第contType属性
contData	object	-	获得内容的数据，写法同getContent函数的第contData属性
heading	string	-	如果需要显示窗口的标题，可填写
cb	function	-	点击“确定”后的回调函数，无参数

简单使用

用法与原生的alert类似，只需要填写content参数即可。

输出
HTML
JS

```
                
                
            
```

                
                demo0001.onclick = ()=>{
                    ax.alert({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                    });
                }

回调函数

参数yes和no分别表示“确定”和“取消”的回调函数，他们都没有参数。

输出
HTML
JS

```
                
                
            
```

                
                demo0101.onclick = ()=>{
                    ax.alert({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                        cb:()=>{console.log('确定了')},
                    });
                }

then

本框架的confirm工具函数返回的是一个Promise，可在then中进行confirm或cancel判断。

输出
HTML
JS

```
                
                
            
```

                
                demo0002.onclick = ()=>{
                    ax.alert({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                    }).then((val)=>{
                         console.log('确定了')
                    });
                }

async+await

使用then做回调处理，可能存在链条太长的问题，可考虑使用async+await，让整个过程更加直观。

输出
HTML
JS

```
                
                
            
```

                
                demo0003.onclick = async ()=>{
                   let val = await ax.alert({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                    });
                     console.log('确定了')
                }

自由的窗口

如果没有使用heading参数，那么窗口将固定在顶部不可移动，如果需要能自由移动对话框，可设置一个任意的heading，这样子可以通过拖拽heading完成窗口移动。

输出
HTML
JS

```
                
                
            
```

                
                demo0004.onclick =  ()=>{
                   ax.alert({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                        heading:'节假日通知'
                    });
                }

多种内容格式

confirm的内容通常是纯文本，但是本工具也支持借助contType和contData参数获得多种格式的内容。

输出
HTML
JS

节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。

遇有重大突发事件，要按规定及时报告并妥善处置，确保人民群众祥和平安度过节日假期。
```
                
                
            
```

                
                demo0301.onclick =  ()=>{
                   ax.alert({
                        content:document.querySelector('#cont01').cloneNode(true),
                    });
                }
                demo0302.onclick =  ()=>{
                   ax.alert({
                        content:'https://req.axui.cn/v3/html/world.html#China',
                        contType:'async'
                        //contData:{},该参数用来向动态页面请求内容时，发送数据，动态页面根据数据返回前端相应的内容
                    });
                }
                demo0303.onclick =  ()=>{
                   ax.alert({
                        content:'#cont02',
                        contType:'html'
                    });
                }