Prompt输入窗详细使用方法

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

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
                            }
                        }
                    });
                }

指定类型

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

input：单行文本域
textarea：多行文本域
file：简单文件域，通常使用upload替代
upload：文件上传
range：滑块域
datetime：日期域
radio：一个单选，通常使用radios组代替
checkbox：一个复选，通常使用checkboxes组代替
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'}});
                }

回调函数

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