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

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

代码演示

基本形式

模态框 modal - 图1

  1. <button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>
  1. var component = new NEKUI.Component({
        template: template,
        show: function() {
            var modal = new NEKUI.Modal({
                data: {
                    lang: 'en-US',
                    content: 'Modal内容'
                }
            });
        }
    });

Disable

模态框 modal - 图2

  1. <button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>
  1. var component = new NEKUI.Component({
        template: template,
        show: function() {
            var modal = new NEKUI.Modal({
                data: {
                    lang: 'en-US',
                    okDisabled: true,
                    cancelDisabled: true,
                    cancelButton: true,
                    content: 'Modal内容'
                }
            });
        }
    });

不显示 footer

模态框 modal - 图3

  1. <button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>
  1. var component = new NEKUI.Component({
        template: template,
        show: function() {
            var modal = new NEKUI.Modal({
                data: {
                    lang: 'en-US',
                    hasFooter: false,
                    content: 'Modal内容'
                }
            });
        }
    });

禁止关闭

模态框 modal - 图4

  1. <button class="u-btn u-btn-primary" on-click={this.show()}>Modal</button>
  1. var component = new NEKUI.Component({
        template: template,
        show: function() {
            var modal = new NEKUI.Modal({
                data: {
                    lang: 'en-US',
                    isCanClose: false,
                    content: 'Modal内容'
                }
            });
        }
    });

Alert

模态框 modal - 图5

  1. <button class="u-btn u-btn-error" on-click={this.show()}>Alert</button>
  1. var component = new NEKUI.Component({
        template: template,
        show: function() {
            NEKUI.Modal.alert('Alert内容');
        }
    });

Confirm

模态框 modal - 图6

  1. <button class="u-btn u-btn-success" on-click={this.show()}>Confirm</button>
  1. var component = new NEKUI.Component({
        template: template,
        show: function() {
            NEKUI.Modal.confirm('Confirm内容');
        }
    });

API

Classes

Functions

Events

Modal

Kind: global classExtend: Component

new Modal()

ParamTypeDefaultDescription
[options.data]object= 绑定属性Binding Properties
[options.data.title]string"提示"=> 对话框标题Title of Dialog
[options.data.content]string=> 对话框内容
[options.data.contentTemplate]string=> 对话框内容模板，用于支持复杂内容的自定义。
[options.data.footerTemplate]string=> 对话框底部模板
[options.data.okDisabled]booleanfalse=> Disale 确认按钮
[options.data.cancelDisabled]booleanfalse=> Disale 取消按钮
[options.data.hasFooter]booleantrue=> 是否显示 footer
[options.data.isCanClose]booleantrue=> 是否允许取消关闭
[options.data.okButton]string | booleantrue=> 是否显示确定按钮。值为string时显示该段文字。
[options.data.cancelButton]string | booleanfalse=> 是否显示取消按钮。值为string时显示该段文字。
[options.data.class]string=> 补充class
[options.data.noClose]boolean=> ok时是否关闭弹窗
[options.data.minHeight]number=> 内容区域最小高度
[options.data.maxHeight]number=> 内容区域最大高度，超出则显示滚动条

config()

Kind: global functionAccess: protected

init()

Kind: global functionAccess: protected

close(result) 关闭对话框(result) ⇒ void

Kind: global functionAccess: public

ParamTypeDescription
resultboolean点击确定还是取消

ok() 确定对话框() ⇒ void

Kind: global functionAccess: public

cancel() 取消对话框() ⇒ void

Kind: global functionAccess: public

“close 关闭对话框时触发”

Kind: event emittedProperties

NameTypeDescription
resultboolean点击了确定还是取消

“ok 确定对话框时触发”

Kind: event emitted

“cancel 取消对话框时触发”

Kind: event emitted