amis/examples/components/Dialog/Simple.jsx

一种MIS页面生成工具

export default {
    type: 'page',
    title: 'Dialog',
    body: [
        {
            type: 'button-toolbar',
            className: 'm-b',
            buttons: [
                {
                    type: 'button',
                    label: '打开弹框',
                    actionType: 'dialog',
                    dialog: {
                        title: '提示',
                        closeOnEsc: true,
                        body: '这是个简单的弹框'
                    }
                },
    
                {
                    type: 'button',
                    label: '多级弹框',
                    actionType: 'dialog',
                    dialog: {
                        title: '提示',
                        closeOnEsc: true,
                        body: '这是个简单的弹框',
                        actions: [
                            {
                                type: 'button',
                                actionType: 'confirm',
                                label: '确认',
                                primary: true
                            },
    
                            {
                                type: 'button',
                                actionType: 'dialog',
                                label: '再弹一个',
                                dialog: {
                                    title: '弹框中的弹框',
                                    closeOnEsc: true,
                                    body: '如果你想，可以无限弹下去',
                                    actions: [
                                        {
                                            type: 'button',
                                            actionType: 'dialog',
                                            label: '来吧',
                                            level: 'info',
                                            dialog: {
                                                title: '弹框中的弹框',
                                                closeOnEsc: true,
                                                body: '如果你想，可以无限弹下去',
                                                actions: [
                                                    {
                                                        type: 'button',
                                                        actionType: 'confirm',
                                                        label: '不弹了',
                                                        primary: true
                                                    }
                                                ]
                                            }
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                },
    
                {
                    type: 'button',
                    label: '弹个表单',
                    actionType: 'dialog',
                    dialog: {
                        title: '在弹框中的表单',
                        closeOnEsc: true,
                        actions: [
                            {
                                label: '取消',
                                actionType: 'close',
                                type: 'button'
                            },
    
                            {
                                label: '确认',
                                actionType: 'confirm',
                                type: 'button',
                                level: 'primary'
                            },
    
                            {
                                label: '提交不关闭',
                                actionType: 'submit',
                                close: false,
                                type: 'button',
                                api: '/api/mock2/form/saveForm?waitSeconds=2',
                                level: 'primary'
                            },
    
                            {
                                label: '保存不关闭',
                                actionType: 'ajax',
                                type: 'button',
                                api: '/api/mock2/form/saveForm?waitSeconds=4',
                                level: 'info'
                            },

                            {
                                type: 'button',
                                label: 'Feedback',
                                close: true,
                                actionType: 'ajax',
                                api: '/api/mock2/form/initData?waitSeconds=2',
                                tooltip: '点击我后会发送一个请求，请求回来后，弹出一个框。',
                                feedback: {
                                    title: '操作成功',
                                    body: 'xxx 已操作成功'
                                }
                            }
                        ],
                        body: {
                            type: "form",
                            api: "/api/mock2/form/saveForm?waitSeconds=2",
                            title: "常规模式",
                            mode: "normal",
                            controls: [
                                {
                                    type: "email",
                                    name: "email",
                                    required: true,
                                    placeholder: "请输入邮箱",
                                    label: "邮箱"
                                },
                                {
                                    type: "password",
                                    name: "password",
                                    label: "密码",
                                    required: true,
                                    placeholder: "请输入密码"
                                },
                                {
                                    type: "checkbox",
                                    name: "rememberMe",
                                    label: "记住登录"
                                }
                            ]
                        }
                    }
                },
    
                {
                    type: 'button',
                    label: '再弹个表单',
                    actionType: 'dialog',
                    dialog: {
                        title: '在弹框中的表单',
                        actions: [
                            {
                                label: '取消',
                                actionType: 'close',
                                type: 'button'
                            },
    
                            {
                                label: '确认',
                                actionType: 'confirm',
                                type: 'button',
                                level: 'primary',
                                disabledOn: '!data.rememberMe'
                            }
                        ],
                        body: {
                            type: "form",
                            api: "/api/mock2/form/saveForm?waitSeconds=2",
                            title: "常规模式",
                            mode: "normal",
                            controls: [
                                {
                                    type: "checkbox",
                                    name: "rememberMe",
                                    label: "勾上我才可以确认"
                                }
                            ]
                        }
                    }
                },

                {
                    type: 'button',
                    label: 'Feedback',
                    actionType: 'ajax',
                    api: '/api/mock2/form/initData?waitSeconds=2',
                    tooltip: '点击我后会发送一个请求，请求回来后，弹出一个框。',
                    feedback: {
                        title: '操作成功',
                        closeOnEsc: true,
                        body: 'xxx 已操作成功'
                    }
                },

                {
                    type: 'button',
                    label: 'Feedback2',
                    actionType: 'ajax',
                    api: '/api/mock2/form/initData?waitSeconds=2',
                    tooltip: '可以根据条件弹出，比如这个栗子，看当前时间戳是否可以整除3',
                    feedback: {
                        visibleOn: '!(this.date % 3)',
                        title: '操作成功',
                        body: '当前时间戳: <code>${date}</code>'
                    }
                },
            ]
        },

        {
            type: "button-toolbar",
            className: 'm-l-none',
            buttons: [
                {
                    type: 'button',
                    label: 'sm 弹框',
                    actionType: 'dialog',
                    dialog: {
                        size: "sm",
                        title: '提示',
                        body: '这是个简单的弹框'
                    }
                },

                {
                    type: 'button',
                    label: '标准 弹框',
                    actionType: 'dialog',
                    dialog: {
                        title: '提示',
                        body: '这是个简单的弹框'
                    }
                },

                {
                    type: 'button',
                    label: 'lg 弹框',
                    actionType: 'dialog',
                    dialog: {
                        size: "lg",
                        title: '提示',
                        body: '这是个简单的弹框'
                    }
                },

                {
                    type: 'button',
                    label: 'xl 弹框',
                    actionType: 'dialog',
                    dialog: {
                        size: "xl",
                        title: '提示',
                        body: '这是个简单的弹框'
                    }
                }
            ]
        }
    ],
}