Prompt输入窗详细使用方法

prompt工具函数可以快速的打开一个或多个表单域,并快速的完成表单录入,可代替原生prompt方法

参数

参数名 值类型 默认值 说明
fields object/object[] - 单个表单域或多个表单域
heading string - 窗口标题
yes function - 点击“确定”后的回调函数,支持一个参数即输出的值(文本)

简单使用

不需要填写任何参数,打开便是一个简单的单行表单域。

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo0001.onclick = ()=>{
                        ax.prompt();
                    }
                    
                

表单域详细

参数fields定义了表单域详细数据,该参数可为一个对象或者一个对象数组,对象的属性如下:

  • type:指定表单域类型
  • label:表单域标题
  • note:表单域注解
  • attrs:表单域的属性(attributes)
  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo0101.onclick = ()=>{
                        ax.prompt({
                            fields:{
                                type:'input',
                                label:'你最近在哪些国家旅行,至少填一个',
                                note:'行走人生,领略百味!',
                                attrs:{
                                    tools:true
                                }
                            }
                        });
                    }
                    
                

不销毁

本函数创建的弹窗和表单域组件都是临时的,在关闭弹窗时就会被销毁(直观表现为,表单域在新窗口永远处于初始化状态);如果需要保持弹窗和表单域实例不销毁(表单域保持上一次关闭时的状态),可使用insName参数。

该参数会标识当前的dialog实例,当窗口重新打开或关闭都不会销毁该实例。

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo2101.onclick = ()=>{
                        ax.prompt({
                            fields:{
                                type:'input',
                            },
                            insName:'demo2101',
                        })
                    }
                    
                

自定义按钮

默认按钮包括:关闭(close)、清除(clear)和确定(confirm);如果需要自定义按钮可以使用dialog.footer.children参数。

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

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

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo2102.onclick = ()=>{
                        ax.prompt({
                            fields:{
                                type:'input',
                            },
                            dialog:{
                                footer:{
                                    children:[{
                                        name:'mybtn',
                                        label:'测试',
                                        action:(data)=>{
                                            data.el.onclick=()=>{
                                                console.log(data);
                                            }
                                        }
                                    },'confirm']
                                }
                            }
                        })
                    }
                    
                

指定类型

属性type指定一个输入类型,支持的类型为自定义组件的类型,可选值如下:

  • input:单行文本域,默认
  • textarea:多行文本域
  • file:简单文件域,通常使用upload替代
  • upload:文件上传
  • range:滑块域
  • datetime:日期域
  • radio:一个单选,通常使用radios组代替
  • checkbox:一个复选,通常使用checkboxes组代替
  • radios:单选组
  • checkboxes:复选组
  • editor:富文本域
  • number:数字域
  • select:下拉选择域,通常使用radios或checkboxes代替
  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo0201.onclick = ()=>{
                        ax.prompt({fields:{type:'textarea'}});
                    }
                    demo0202.onclick = ()=>{
                        ax.prompt({fields:{type:'range'}});
                    }
                    demo0203.onclick = ()=>{
                        ax.prompt({fields:{type:'datetime'}});
                    }
                    demo0204.onclick = ()=>{
                        ax.prompt({fields:{type:'radios',attrs:{content:'文学,历史,哲学'}}});
                    }
                    demo0205.onclick = ()=>{
                        ax.prompt({fields:{type:'checkboxes',attrs:{content:'文学,历史,哲学'}}});
                    }
                    demo0206.onclick = ()=>{
                        ax.prompt({fields:{type:'upload',attrs:{
                            url:'https://req.axui.cn/v3/php/upload.php'
                        }}});
                    }
                    demo0207.onclick = ()=>{
                        ax.prompt({fields:{type:'number',attrs:{
                            value:12,
                        }}});
                    }
                    demo0208.onclick = ()=>{
                        ax.prompt({fields:{type:'select',attrs:{
                            content:'香蕉,苹果,芒果',
                        }}});
                    }
                    demo0209.onclick = ()=>{
                        ax.prompt({fields:{type:'editor'}});
                    }
                    demo0210.onclick = ()=>{
                        ax.prompt({fields:{type:'file'}});
                    }
                    
                

回调函数

参数yes分别表示“确定”的回调函数,支持一个参数即表单域的值,因为存在多个表单域的情况,所以参数的值为一个对象,该对象包含两个属性:

  • value:所有表单域的值,数组格式
  • fields:表单域数据数组,每一项为一个对象,对象的属性有:type、label和value(文本)
  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo0301.onclick = ()=>{
                        ax.prompt({yes:(val)=>{
                            console.log(val)
                        }});
                    }
                    
                

多个表单域

参数fields可以以数组形式可插入多个表单域。

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo0901.onclick = ()=>{
                        ax.prompt({
                            fields:[
                                {type:'input',label:'单行文本'},
                                {type:'textarea',label:'多行文本'},
                                {type:'upload',label:'文件上传'},
                                ],
                                yes:(val)=>{
                                    console.log(val);
                                }
                        });
                    }
                    
                

then

本框架的prompt工具函数返回的是一个Promise,可在then中取值。

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo0401.onclick = ()=>{
                        ax.prompt().then((val)=>{
                            console.log('确定了',val)
                        });
                    }
                    
                

async+await

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

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo0501.onclick = async ()=>{
                       let val = await ax.prompt();
                       console.log('确定了',val)
                    }
                    
                

自由的窗口

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

  • 输出
  • HTML
  • JS
  •                 
                    
                
  •                 
                    demo0601.onclick =  ()=>{
                       ax.prompt({
                            heading:'节假日通知'
                        });
                    }