模态框 KLModal

基本形式

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

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

<kl-button on-click="{this.show()}"  title="Modal"/>

var component = new NEKUI.Component({
    template: template,
    show: function() {
        // 打开一个Modal
        var modal = new NEKUI.KLModal({
            data: {
                content: 'Modal内容'
            }
        });
    }
});

配置信息title

设置打开modal的标题，默认显示notice

<kl-button on-click="{this.show()}"  title="Title"/>

var component = new NEKUI.Component({
    template: template,
    show: function() {
        var modal = new NEKUI.KLModal({
            data: {
                title: '我是自定义title',
            }
        });
    }
});

配置信息contentTemplate

设置modal的内容显示区域(html代码片段)。默认为空

<kl-button on-click="{this.show()}"  title="contentTemplate"/>

var component = new NEKUI.Component({
    template: template,
    show: function() {
        var modal = new NEKUI.KLModal({
            data: {
                name: 'Rabbit',
                contentTemplate: '<kl-row><kl-col span=10><kl-input value="{name}"/></kl-col></kl-row>'
            }
        });
    }
});

配置信息okDisabled

是否禁用footer中原生Confirm按钮，true表示是，false表示否。默认为false

<kl-button on-click="{this.show(true)}"  title="okDisabled: true"/>
<kl-button on-click="{this.show(false)}"  title="okDisabled: false"/>

var component = new NEKUI.Component({
    template: template,
    show: function(okDisabled) {
        var modal = new NEKUI.KLModal({
            data: {
                okDisabled: okDisabled,
                content: 'okDisabled设置为' + okDisabled,
            }
        });
    }
});

配置信息cancelDisabled

是否禁用footer中原生Cancel按钮，true表示是，false表示否，该属性需要与cancelButton属性配合使用。默认为false。

<kl-button on-click="{this.show(true)}"  title="cancelDisabled: true"/>
<kl-button on-click="{this.show(false)}"  title="cancelDisabled: false"/>

var component = new NEKUI.Component({
    template: template,
    show: function(cancelDisabled) {
        var modal = new NEKUI.KLModal({
            data: {
                cancelDisabled: cancelDisabled,
                cancelButton: true,
                content: 'cancelDisabled设置为' + cancelDisabled,
            }
        });
    }
});

配置信息isCanClose

设置是否可关闭Modal(显示关闭图标),默认为true，可关闭。

<kl-button on-click="{this.show(true)}"  title="isCanClose: true"/>
<kl-button on-click="{this.show(false)}"  title="isCanClose: false"/>

var component = new NEKUI.Component({
    template: template,
    show: function(isCanClose) {
        var modal = new NEKUI.KLModal({
            data: {
                isCanClose: isCanClose,
                content: 'isCanClose设置为' + isCanClose,
            }
        });
        modal.$on('ok', function(res){
           console.log(res);
        });
    }
});

配置信息cancelButton

设置cancelButton按钮是否显示true(显示)/false(不显示)，也可以设置显示文本(设置字符串)，默认文本Cancel且不显示

<kl-button on-click="{this.show('取消')}"  title="cancelButton: '取消'" />
<kl-button on-click="{this.show(true)}"  title="cancelButton: true" />
<kl-button on-click="{this.show(false)}"  title="cancelButton: false" />

var component = new NEKUI.Component({
    template: template,
    show: function(cancelButton) {
        var modal = new NEKUI.KLModal({
            data: {
                cancelButton: cancelButton,
                content: '设置cancelButton'
            }
        });
    }
});

配置信息noClose

点击ok按钮的时候是否自动关闭Modal，默认为true。

<kl-button on-click="{this.show(true)}"  title="noClose: true" />
<kl-button on-click="{this.show(false)}"  title="noClose: false" />

var component = new NEKUI.Component({
    template: template,
    show: function(noClose) {
        var modal = new NEKUI.KLModal({
            data: {
                noClose: noClose,
                content: '设置noClose:' + noClose,
            }
        });
    }
});

配置信息maxHeight

设置Modal的最大显示高度，默认随内容变化。

备注：若同时配置minHeight，且其值大于maxHeight，则以minHeight的值生效

<kl-button on-click="{this.show()}"  title="maxHeight: 不设置" />
<kl-button on-click="{this.show(200)}"  title="maxHeight: 200" />
<kl-button on-click="{this.show(400)}"  title="maxHeight: 400" />

var component = new NEKUI.Component({
    template: template,
    show: function(maxHeight) {
        var data = {
            cancelButton: true,
            contentTemplate: '<div style="height: 300px;border: 2px dotted #ddd;"></div>',
        };
        if(maxHeight) {
            data.maxHeight = maxHeight;
        }
        var modal = new NEKUI.KLModal({
            data: data
        });
    }
});

实例方法ok

通过实例调用，执行该实例对象的ok事件,若属性noClose设置为true，则只会调用ok方法，不会关闭Modal

该方法执行时会派发ok事件，通过modal.$on('ok', callback)监听,打开控制台可查看

<kl-button on-click="{this.show(true)}"  title="【noClose:true】" />
<kl-button on-click="{this.show(false)}"  title="【noClose:false】" />

var component = new NEKUI.Component({
    template: template,
    show: function(noClose) {
        var data = {
            cancelButton: true,
            noClose: noClose,
            contentTemplate: '<div style="height: 300px;border: 2px dotted #ddd;">3秒后调用ok</div>',
        };
        var modal = new NEKUI.KLModal({
            data: data
        });
        modal.$on('ok', function(){
            console.log('监听ok事件');
        });
        setTimeout(function(){
             modal.ok();
        }, 3000);
    }
});

静态方法alert

通过NEKUI.KLModal.alert调用，返回实例本身，弹出一个alert对话框。关闭时始终触发ok事件。有三个参数，参数一content【必填】为对话框内容；参数二title为对话框title信息，默认为提示；参数三okButton为对话框确定按钮，true显示，false不显示，string按钮文本，默认为确定

该点击ok按钮会调用ok事件

<div class="g-row">
    <kl-button on-click="{this.show('设置参数一:content')}"  title="alert(content)" />
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title')}"  title="alert(content, title)" />
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', true)}"  title="alert(content, title, okButton)" />
</div>
<div class="g-row">
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', false)}"  title="alert(content, title, okButton)" />
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', '确定')}"  title="alert(content, title, okButton)" />
</div>

var component = new NEKUI.Component({
    template: template,
    show: function(content, title, okButton) {
        var modal = NEKUI.KLModal.alert(content, title, okButton);
        modal.$on('ok', function(){
            console.log('监听ok事件');
        });
    }
});

配置要嵌入的父级元素

设置modal嵌入的父级元素，默认为document.body

<kl-button on-click="{this.show()}"  title="el: main"/>

var component = new NEKUI.Component({
    template: template,
    show: function() {
        // 打开一个Modal，inject到#main元素里
        var modal = new NEKUI.KLModal({
            data: {
                content: 'Modal内容',
                el: '#main'
            }
        });
    }
});

配置信息content

设置modal的内容显示区域(纯文本)。默认为空。

<kl-button on-click="{this.show()}"  title="content"/>

var component = new NEKUI.Component({
    template: template,
    show: function() {
        var modal = new NEKUI.KLModal({
            data: {
                content: 'Modal的自定义文本内容'
            }
        });
    }
});

配置信息footerTemplate

设置modal的footer显示区域(html代码片段)。默认onfirm和Cancel按钮

<kl-button on-click="{this.show()}"  title="footerTemplate"/>

var component = new NEKUI.Component({
    template: template,
    show: function() {
        var modal = new NEKUI.KLModal({
            data: {
                name: 'Rabbit',
                content: '自定义footer',
                footerTemplate: '<kl-row><kl-col span=6><kl-button title="提交" type="secondary" /></kl-col><kl-col span=6><kl-button title="撤销"  type="success" /></kl-col></kl-row>'
            }
        });
    }
});

配置信息hasFooter

是否显示Modal的footer部分，true表示显示，false表示不显示，默认为true。

<kl-button on-click="{this.show(true)}"  title="hasFooter: true"/>
<kl-button on-click="{this.show(false)}"  title="hasFooter: false"/>

var component = new NEKUI.Component({
    template: template,
    show: function(hasFooter) {
        var modal = new NEKUI.KLModal({
            data: {
                hasFooter: hasFooter,
                content: 'hasFooter设置为' + hasFooter,
            }
        });
    }
});

配置信息okButton

设置okButton按钮是否显示true(显示)/false(不显示)，也可以设置显示文本(设置字符串)，设置默认为Confirm

<kl-button on-click="{this.show('确认')}"  title="okButton: '确认'" />
<kl-button on-click="{this.show(true)}"  title="okButton: true" />
<kl-button on-click="{this.show(false)}"  title="okButton: false" />

var component = new NEKUI.Component({
    template: template,
    show: function(okButton) {
        var modal = new NEKUI.KLModal({
            data: {
                okButton: okButton,
                content: '设置okButton的值',
            }
        });
    }
});

配置信息class

设置自定义Modal样式。

<kl-button on-click="{this.show()}"  title="cancelButton" />

var component = new NEKUI.Component({
    template: template,
    show: function() {
        var modal = new NEKUI.KLModal({
            data: {
                cancelButton: true,
                content: '设置自定义样式',
                class: 'u-modal-red',
            }
        });
    }
});

配置信息minHeight

设置Modal的最小显示高度，默认随内容变化。

备注：只有同时配置maxHeight该属性才会生效

<kl-button on-click="{this.show()}"  title="minHeight: 不设置" />
<kl-button on-click="{this.show(300)}"  title="minHeight: 300" />
<kl-button on-click="{this.show(600)}"  title="minHeight: 600" />

var component = new NEKUI.Component({
    template: template,
    show: function(minHeight) {
        var data = {
            cancelButton: true,
            contentTemplate: '<div style="height: 400px;border: 2px dotted #ddd;"></div>',
        };
        if(minHeight) {
            data.minHeight = minHeight;
            data.maxHeight = 350;
        }
        var modal = new NEKUI.KLModal({
            data: data
        });
    }
});

配置信息draggable

设置Modal可拖拽，默认不可拖拽。

<kl-button on-click="{this.show()}"  title="draggable：true"/>

var component = new NEKUI.Component({
    template: template,
    show: function() {
        var modal = new NEKUI.KLModal({
            data: {
                content: 'Modal可拖拽',
                draggable: true
            }
        });
    }
});

实例方法cancel

通过实例调用，执行该实例对象的cancel事件

该方法执行时会派发cancel事件，通过modal.$on('cancel', callback)监听,打开控制台可查看

<kl-button on-click="{this.show()}"  title="cancel" />

var component = new NEKUI.Component({
    template: template,
    show: function() {
        var data = {
            cancelButton: true,
            contentTemplate: '<div style="height: 300px;border: 2px dotted #ddd;">3秒后调用cancel</div>',
        };
        var modal = new NEKUI.KLModal({
            data: data
        });
        modal.$on('cancel', function(){
            console.log('监听cancel事件');
        });
        setTimeout(function(){
             modal.cancel();
        }, 3000);
    }
});

实例方法close

通过实例调用，执行该实例对象的close事件，可接收一个标志调用close(true)或者cancel(false)方法的参数。默认调用cancel事件该方法执行时会派发close事件，通过modal.$on('close', callback)监听,打开控制台可查看

<kl-button on-click="{this.show(true)}"  title="close:true" />
<kl-button on-click="{this.show(false)}"  title="close:false" />
<kl-button on-click="{this.show()}"  title="close:不传" />

var component = new NEKUI.Component({
    template: template,
    show: function(close) {
        var data = {
            cancelButton: true,
            contentTemplate: '<div style="height: 300px;border: 2px dotted #ddd;">3秒后调用close</div>',
        };
        var modal = new NEKUI.KLModal({
            data: data
        });
        modal.$on('close', function(evt){
            console.log('监听close事件');
            // evt:true调用ok，false调用cancel
            console.log(evt);
        });
        modal.$on('cancel', function(){
            console.log('监听cancel事件');
        });
        modal.$on('ok', function(){
            console.log('监听ok事件');
        });
        setTimeout(function(){
            modal.close(close);
        }, 3000);
    }
});

静态方法confirm

通过NEKUI.KLModal.confirm调用，返回实例本身，弹出一个confirm对话框。ok按钮触发ok事件，cancel按钮触发cancel事件。有四个参数，参数一content【必填】为对话框内容；参数二title为对话框title信息，默认为提示；参数三okButton为对话框确定按钮，true显示，false不显示，string按钮文本，默认为确定；参数四cancelButton为对话框取消按钮，boolean显示，string按钮文本，默认为取消

该点击ok按钮会调用ok事件

<div class="g-row">
    <kl-button on-click="{this.show('设置参数一:content')}"  title="alert(content)" />
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title')}"  title="alert(content, title)" />
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', true)}"  title="alert(content, title, okButton)" />
</div>
<div class="g-row">
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', false)}"  title="alert(content, title, okButton)" />
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', '确定')}"  title="alert(content, title, okButton)" />
</div>
<div class="g-row">
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', '确定','撤销')}"  title="alert(content, title, okButton, cancelButton)" />
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', '确定', true)}"  title="alert(content, title, okButton, cancelButton)" />
</div>
<div class="g-row">
    <kl-button on-click="{this.show('设置参数一:content', '设置参数二title', '确定', false)}"  title="alert(content, title, okButton, cancelButton)" />
</div>

var component = new NEKUI.Component({
    template: template,
    show: function(content, title, okButton, cancelButton) {
        var modal = NEKUI.KLModal.confirm(content, title, okButton, cancelButton);
        modal.$on('ok', function(){
            console.log('监听ok事件');
        });
        modal.$on('cancel', function(){
            console.log('监听cancel事件');
        });
    }
});

API

KLModal

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.title]	`string`	`"提示"`	=> 对话框标题
[options.data.content]	`string`		=> 对话框内容
[options.data.contentTemplate]	`string`		=> 对话框内容模板，用于支持复杂内容的自定义。
[options.data.footerTemplate]	`string`		=> 对话框底部模板
[options.data.okDisabled]	`boolean`	`false`	=> Disable 确认按钮
[options.data.cancelDisabled]	`boolean`	`false`	=> Disable 取消按钮
[options.data.hasFooter]	`boolean`	`true`	=> 是否显示 footer
[options.data.isCanClose]	`boolean`	`true`	=> 是否允许取消关闭
[options.data.okButton]	`string/boolean`	`true`	=> 是否显示确定按钮。值为`string`时显示该段文字。
[options.data.cancelButton]	`string/boolean`	`false`	=> 是否显示取消按钮。值为`string`时显示该段文字。
[options.data.class]	`string`		=> 补充class
[options.data.noClose]	`boolean`		=> ok时是否关闭弹窗
[options.data.minHeight]	`number`		=> 内容区域最小高度
[options.data.maxHeight]	`number`		=> 内容区域最大高度，超出则显示滚动条
[options.data.el]	`string`		=> 设置对话框要插入的父级元素，默认为document.body
[options.data.draggable]	`boolean`	`false`	=> 是否可以拖拽对话框

.close(result) 关闭对话框method

Param	Type	Description
result	`boolean`	点击确定还是取消

.ok() 确定对话框method

.cancel() 取消对话框method

close 关闭对话框时触发Event

Name	Type	Description
result	`boolean`	点击事件按钮，确定/取消

ok 确定对话框时触发Event

cancel 取消对话框时触发Event

.alertstatic method

Param	Type	Default	Description
content	`string`		对话框内容
title	`string`	`"提示"`	对话框标题

.confirmstatic method

Param	Type	Default	Description
content	`string`		对话框内容
title	`string`	`"提示"`	对话框标题