Prompt输入窗详细使用方法

2024-09-19 16:13:08首发，11分钟前更新

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:'节假日通知'
                    });
                }