模态对话框 Modal

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

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

示例

基本形式

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

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

Alert

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

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

Confirm

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

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

拖拽

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

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

API

Class

Modal

继承自Component。

Options

new Modal()

参数	类型	默认值	数据流向	描述
`data`	object			绑定属性 \| Binding Properties
`data.title`	string	`'提示'`	outer => inner	对话框标题 \| Title of Dialog
`data.content`	string	`''`	outer => inner	对话框内容
`data.contentTemplate`	string	`''`	outer => inner	对话框内容模板，用于支持复杂内容的自定义。
`data.okButton`	string boolean	`true`	outer => inner	是否显示确定按钮。值为`string`时显示该段文字。
`data.cancelButton`	string boolean	`false`	outer => inner	是否显示取消按钮。值为`string`时显示该段文字。
`data.draggable`	boolean	`false`	outer => inner	是否可以拖拽对话框
`data.class`	string	`''`	outer => inner	补充class

Methods

modal.close(result)

关闭对话框

参数	类型	默认值	描述
`result`	boolean		点击确定还是取消
返回值	类型	描述
无返回值

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

关闭对话框时触发

属性	类型	描述
`result`	boolean	点击了确定还是取消

modal.$on('ok')

确定对话框时触发

属性	类型	描述
无属性

modal.$on('cancel')

取消对话框时触发

属性	类型	描述
无属性