Confirm对话框

2024-09-19 16:13:08首发，1个月前更新

confirm工具函数模拟原生confirm方法，可以快速的打开一个确认对话框

参数

参数名	值类型	默认值	说明
content	string	''	窗口主体内容，通常为纯文本，也支持其他格式，写法同getContent函数的第content属性
contType	string	''	内容类型，写法同getContent函数的第contType属性
contData	object	{}	获得内容的数据，写法同getContent函数的第contData属性
tplStr	string	''	模板文本，当获得的数据是对象或数组时使用
tplEng	function	null	模板引擎，可使用第三方模板引擎
heading	string	''	如果需要显示窗口的标题，可填写
yes	function	null	点击“确定”后的回调函数，无参数
no	function	null	点击“取消”后的回调函数，无参数

简单使用

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

输出
HTML
JS

```
                
                
            
```

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

回调函数

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

输出
HTML
JS

```
                
                
            
```

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

then

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

输出
HTML
JS

```
                
                
            
```

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

async+await

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

输出
HTML
JS

```
                
                
            
```

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

自由的窗口

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

输出
HTML
JS

```
                
                
            
```

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

多种内容格式

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

如果获取的数据是对象或数组，则有必要使用tplStr和tplEng参数；tplEng是模板引擎，默认使用本框架自带的renderTpl函数，用户可指定其他第三方模板引擎；tplStr是模板文本，写法规则需遵循模板引擎的使用规则。

输出
HTML
JS

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

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

                
                demo0301.onclick =  ()=>{
                   ax.confirm({
                        content:document.querySelector('#cont01').cloneNode(true),
                    });
                }
                demo0302.onclick =  ()=>{
                   ax.confirm({
                        content:'https://req.axui.cn/v3/html/world.html#China',
                        contType:'async'
                        //contData:{},该参数用来向动态页面请求内容时，发送数据，动态页面根据数据返回前端相应的内容
                    });
                }
                demo0303.onclick =  ()=>{
                   ax.confirm({
                        content:'#cont02',
                        contType:'html'
                    });
                }
                demo0304.onclick =  ()=>{
                   ax.confirm({
                        content:'https://req.axui.cn/v3/json/ax.json',
                        contType:'async',
                        tplStr:`<ul><li>Name:{{this.name}}</li><li>Brief:{{this.brief}}</li><li>Site:{{this.site}}</li></ul>`,
                    });
                }

自定义按钮

如果需要自定义按钮可以使用dialog.footer.children参数。

具体设置方法需要参考Dialog模块中设置footer的方法。

当然，用户不仅可以通过dialog.footer.children自定义按钮，通过dialog.*定义整个弹窗参数。

输出
HTML
JS

```
                
                
            
```

                
                demo2102.onclick = ()=>{
                    ax.confirm({
                        content:'节假日期间，各地区、各部门要妥善安排好值班和安全、保卫、疫情防控等工作。',
                        dialog:{
                            footer:{
                                children:[{
                                    name:'mybtn',
                                    label:'测试',
                                    action:(data)=>{
                                        data.el.onclick=()=>{
                                            console.log(data);
                                        }
                                    }
                                },'confirm']
                            }
                        }
                    })
                }