Nocturnal Pumpkin Maelstrom

    nuke-modal

    2.3.12 • Public • Published

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

    Keywords

    Install

    npm i nuke-modal

    DownloadsWeekly Downloads

    11

    Version

    2.3.12

    License

    Apache-2.0

    Unpacked Size

    65.8 kB

    Total Files

    28

    Last publish

    Collaborators

    • bindoon
    • doub
    • fnatic
    • leanhunter