# Modal

- category: UI
- chinese: 模态框
- type: UI组件

---

## 设计思路

Modal 是对 weex 的 modal 模块的封装，包含 alert, confirm, prompt 个方法，在 web 端分别用 window 下的 alert, confirm, prompt 完成降级。

Weex 端内的对话框默认是调用系统对话框（随系统 UI ），但 app 也可以改写此行为，对接到 app 的对话框组件。

如果你觉得系统对话框无法满足诉求，可以使用 Dialog 组件完成自定义浮层设计。

**注意**与 web 端不同的是，所有弹出的数据必须为 `String` 类型， 如果是 JavaScript 对象或数组，native modal 模块可能无法识别，无法正常弹出。



## API

### Modal.alert

| 参数            | 说明                               | 类型              | 默认值 |
| --------------- | ---------------------------------- | ----------------- | ------ |
| title           | 标题                               | string            | 无     |
| callbackorArray | 回调函数，或者按钮设置（ 见demo ） | function or array | 无     |

```js
// 简单使用
Modal.alert("大家好") 

//有回调
Modal.alert("大家好",(e)=>{ console.log(e)}) 

//可以设置按钮内容
Modal.alert("大家好",[ 
    {
        onPress:(e)=>{console.log(e)},
        text:"确定按钮"
    }
])
```

### Modal.confirm

| 属性            | 说明                               | 类型              | 默认值 |
| --------------- | ---------------------------------- | ----------------- | ------ |
| message         | 内容                               | string            | 无     |
| callbackorArray | 回调函数，或者按钮设置（ 见demo ） | function or array | 无     |


```js
// 简单使用
Modal.confirm("大家好") 

//只关注确定回调的简单写法
Modal.confirm("大家好",()=>{ console.log('点击了确定')}) 

//只关注确定回调，并且设置按钮内容
Modal.confirm("大家好",[ 
    {
        onPress:()=>{console.log('点击了确定')},
        text:"确定"
    }
])

//确定、取消，可设置按钮内容
Modal.confirm('给个评价吧！！',[ 
    {
        onPress:()=>{console.log('点击了去看看')},
        text:"去看看"
    },
    {
        onPress:()=>{console.log('点击了以后再说')},
        text:"以后再说"
    }
]);
```

### Modal.prompt

| 属性            | 说明                               | 类型              | 默认值 |
| --------------- | ---------------------------------- | ----------------- | ------ |
| message         | 内容                               | string            | 无     |
| callbackorArray | 回调函数，或者按钮设置（ 见demo ） | function or array | 无     |


```js

//只关注确定回调的简单写法
Modal.prompt("请填写你的工号：",(e)=>{ console.log(e)}) 

//只关注确定回调，并且设置按钮内容
Modal.prompt("大家好",[ 
    {
        onPress:(e)=>{console.log(e)},
        text:"确定"
    }
])

//确定、取消，可设置按钮内容
Modal.prompt('请填写你的工号：',[ 
    {
        onPress:(e)=>{console.log(e)},
        text:"确认了"
    },
    {
        onPress:()=>{console.log('点击了取消')},
        text:"取消"
    }
]);
```

### Modal.toast
| 属性     | 说明     | 类型                              | 默认值  |
| -------- | -------- | --------------------------------- | ------- |
| message  | 内容     | string                            | 无      |
| duration | 持续时间 | 有 `SHORT` 2s， `LONG` 3.5s; 可选 | `SHORT` |

```js
//简单写法 duration 默认为'SHORT'
Modal.toast('Hi');

//3.5s
Modal.toast('Hi','LONG');


```