# Modal

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

---

- **注意** 所有的text属性设置 button 文字的，只在weex native 生效，h5下无效。

## API 

### Modal.alert

参数 | 说明 | 类型 | 默认值
-----|-----|-----|-----
title | 标题 | string | 无
callbackorArray | 内容 | string| 无

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

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

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

### Modal.confirm
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
message | 内容  | string | 无
callbackorArray | 内容 | string| 无


````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 | 内容 | string| 无


````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');


````

### Modal.Toast 新增自定义用法 (h5 only)
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
options | 内容  | object | 无
duration | 持续时间 | 有 `SHORT` 2s， `LONG` 3.5s; 可选 | `SHORT`
mountNode | 渲染到什么节点，可以为空 |  | 

````js
//使用系统iconfont
Modal.toast({
    message:'上传成功！',
    icon:{
        name:'favoritesFilling',
        style:{
            width:'40rem',
            height:'40rem'
        }
    },
    
},'LONG');

//图片
Modal.toast({
    message:'上传成功！',
    icon:{
        source:'https://img.alicdn.com/tfs/TB1k.IIPVXXXXcWapXXXXXXXXXX-200-200.png',
        style:{
            width:'40rem',
            height:'40rem'
        }
    },
    
},'LONG');


````