nuke-modal

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.alert("大家好") 
 
//有回调
Modal.alert("大家好",(e)=>{ console.log(e)}) 
 
//可以设置按钮内容
Modal.alert("大家好",[ 
    {
        onPress:(e)=>{console.log(e)},
        text:"确定按钮"
    }
])

Modal.confirm

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

// 简单使用
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	无

 
//只关注确定回调的简单写法
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

//简单写法 duration 默认为'SHORT'
Modal.toast('Hi');
 
//3.5s
Modal.toast('Hi','LONG');