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 | 无 |
// 简单使用Modal //有回调Modal //可以设置按钮内容Modal
Modal.confirm
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 内容 | string | 无 |
callbackorArray | 回调函数,或者按钮设置( 见demo ) | function or array | 无 |
// 简单使用Modal //只关注确定回调的简单写法Modal //只关注确定回调,并且设置按钮内容Modal //确定、取消,可设置按钮内容Modal;
Modal.prompt
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 内容 | string | 无 |
callbackorArray | 回调函数,或者按钮设置( 见demo ) | function or array | 无 |
//只关注确定回调的简单写法Modalprompt"请填写你的工号:"{ console} //只关注确定回调,并且设置按钮内容Modalprompt"大家好" {console} text:"确定" //确定、取消,可设置按钮内容Modalprompt'请填写你的工号:' {console} text:"确认了" {console} text:"取消" ;
Modal.toast
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
message | 内容 | string | 无 |
duration | 持续时间 | 有 SHORT 2s, LONG 3.5s; 可选 |
SHORT |
//简单写法 duration 默认为'SHORT'Modal; //3.5sModal;