模态框 Modal

含有遮罩层的对话框，用于模拟浏览器的alert、confirm和prompt。

模态框通过遮罩层来阻止用户的其他行为。

示例

基本形式

<button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>

let component = new RGUI.Component({
    template,
    show() {
        let modal = new RGUI.Modal({
            data: {
                title: 'Modal标题',
                content: 'Modal内容',
            },
        });
    },
});

Alert

<button class="u-btn u-btn-error" on-click={this.show()}>Alert</button>

let component = new RGUI.Component({
    template,
    show() {
        RGUI.Modal.alert('Alert内容');
    },
});

Confirm

<button class="u-btn u-btn-success" on-click={this.show()}>Confirm</button>

let component = new RGUI.Component({
    template,
    show() {
        RGUI.Modal.confirm('Confirm内容');
    },
});

Disabled

设置disabled为true，可以禁用确定按钮。

<button class="u-btn u-btn-warning" on-click={this.show()}>Modal</button>

let component = new RGUI.Component({
    template,
    show() {
        let modal = new RGUI.Modal({
            data: {
                title: 'Modal标题',
                content: 'Modal内容',
                disabled: true
            },
        });
    },
});

事件

请打开浏览器的控制台查看结果。

<button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>

let component = new RGUI.Component({
    template,
    show() {
        let modal = new RGUI.Modal({
            data: {
                title: 'Modal标题',
                content: 'Modal内容',
                cancelButton: '',
            },
        }).$on('close', () => console.log('on-close'))
          .$on('ok', () => console.log('on-ok'))
          .$on('cancel', () => console.log('on-cancel'));
    },
});

API

Class

Modal

继承自。

Options

new Modal()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.title`	string	`'提示'`	outside => inside	模态框标题
`data.content`	string	`''`	outside => inside	模态框内容
`data.contentTemplate`	string	`''`	outside @=> inside	模态框内容模板，用于支持复杂内容的自定义。
`data.okButton`	string	`'确定'`	outside => inside	确定按钮的文字，如果为空则不显示。
`data.cancelButton`	string	`'取消'`	outside => inside	取消按钮的文字，如果为空则不显示。
`data.disabled`	boolean	`false`	outside => inside	是否禁用。禁用时，确定按钮不可点。
`data.class`	string	`''`	outside => inside	补充class
`data.submitting`	boolean	`false`	outside => inside	是否处于提交中状态。

Methods

modal.close()

关闭模态框

参数	类型	默认值
无参数
返回值	类型	描述
无返回值

modal.ok()

确定模态框

参数	类型	默认值
无参数
返回值	类型	描述
无返回值

modal.cancel()

取消模态框

参数	类型	默认值
无参数
返回值	类型	描述
无返回值

Static Methods

Modal.alert(content[, title])

弹出一个alert模态框。关闭时始终触发确定事件。

参数	类型	默认值	描述
`content`	string	`''`	模态框内容
`title`	string	`'提示'`	模态框标题
返回值	类型	描述
`modal`	Modal	返回该模态框

Modal.confirm(content[, title])

弹出一个confirm模态框

参数	类型	默认值	描述
`content`	string	`''`	模态框内容
`title`	string	`'提示'`	模态框标题
返回值	类型	描述
`modal`	Modal	返回该模态框

Events

modal.$on('close')

关闭模态框时触发

属性	类型	描述
`sender`	object	事件发送对象

modal.$on('ok')

确定模态框时触发

属性	类型	描述
`sender`	object	事件发送对象

modal.$on('cancel')

取消模态框时触发

属性	类型	描述
`sender`	object	事件发送对象