通知 KLNotify

基本形式

一般用于错误、警告等提示消息。创建显示消息的通知，并且能自动弹出。

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

var component = new NEKUI.Component({
    template: template,
    show: function() {
        NEKUI.KLNotify.show('提示你点击了按钮');
    }
});

配置信息position

设置提示消息相对于窗口显示的位置。取值有topcenter、topleft、topright、bottomcenter、bottomleft、bottomright、static

配置信息可在config中统一设置

<div class="kl-row">
    <kl-button title="topcenter" on-click="{this.show('topcenter')}" />
    <kl-button title="topleft" on-click="{this.show('topleft')}" />
    <kl-button title="topright" on-click="{this.show('topright')}" />
    <kl-button title="bottomcenter" on-click="{this.show('bottomcenter')}" />
</div>
<div class="kl-row">
    <kl-button title="bottomleft" on-click="{this.show('bottomleft')}" />
    <kl-button title="bottomright" on-click="{this.show('bottomright')}" />
    <kl-button title="static" on-click="{this.show('static')}" />
</div>

var component = new NEKUI.Component({
    template: template,
    show: function(position) {
        var Notify = new NEKUI.KLNotify({data: {position: position} });
        Notify.show('position:' + position);
    }
});

配置信息duration

设置消息显示的时间，单位是ms，如果设置为0则表示提示消息一直存在，默认为2秒

配置信息可在config中统一设置

<kl-button title="消息提示不自动关闭" on-click="{this.show(0)}" />
<kl-button title="1秒后自动关闭" on-click="{this.show(1000)}" />
<kl-button title="默认2秒" on-click="{this.show()}" />

var Notify = null;
var component = new NEKUI.Component({
    template: template,
    show: function(duration) {
        Notify =  new NEKUI.KLNotify({data: {duration: duration} });
        var res = duration || (duration === 0 ? 0 : '2000');
        Notify.show('duration:' + res);
        if(duration === 0) {
             // 5秒后清除此Notify对象
            setTimeout(function(Notify){
                return function() {
                     // close和closeAll方法在实例对象的原型链上
                    Notify.closeAll();
                }
            }(Notify), 5000)
        }
    },
});

配置信息single

是否始终显示一条，将single设置为true，可以让notify始终只显示一条消息。

配置信息可在config中统一设置

<kl-button title="notice" on-click="{this.show('notice')}" />
<kl-button title="success" on-click="{this.show('success')}" />
<kl-button title="warning" on-click="{this.show('warning')}" />
<kl-button title="error" on-click="{this.show('error')}" />

var component = new NEKUI.Component({
    template: template,
    config: function() {
        // config中初始化notify，配置只显示一条消息
        this.notify = new NEKUI.KLNotify({data: {single: true, duration: 5000} });
    },
    number: 1,
    show: function(state) {
        this.notify[state](state + this.number + '.');
        this.number++;
    }
});

配置信息visible

通知是否显示，将visible设置为true，通知不显示。设置为false，则可以显示

配置信息可在config中统一设置

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

var component = new NEKUI.Component({
    template: template,
    show: function(visible) {
        var Notify = new NEKUI.KLNotify({data: {visible: visible} });
        Notify.show('visible: ' + visible);
    }
});

配置信息class

设置额外样式

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

var component = new NEKUI.Component({
    template: template,
    show: function(visible) {
       var Notify =  new NEKUI.KLNotify({data: {class: 'm-bg-notify-demo', duration: 1000}});
       Notify.show('设置红色字体');
    }
});

show方法

打开一条提示消息，传递3个参数，第一个参数text(必传): 消息内容；第二个参数state(可选): 消息状态success、notice、warning、error，默认为notice；第三个参数duration消息展示时间，单位为ms，默认2秒，如果为0，则表示永不消失。*

同时消息提示时会派发show事件，可以通过NEKUI.KLNotify.notify.$on('show', callback') 监听，并且该事件一定要写在show方法调用之前,打开控制台，可以查看$on接收参数

<kl-button title="参数一" on-click="{this.show('只传递参数一')}" />
<kl-button title="一和二" on-click="{this.show('传递参数一和二', 'error')}" />
<kl-button title="都传" on-click="{this.show('参数都传递', 'error', 1000)}" />


var component = new NEKUI.Component({
    template: template,
    show: function(content, state, duration) {
        NEKUI.KLNotify.show(content, state, duration);
    }
});

close方法

关闭某条消息，同时会派发出close事件，可以通过$on('close', callback)监听

<kl-button title="close" on-click="{this.show('2s后调用close方法')}" />

var component = new NEKUI.Component({
    template: template,
    show: function(content) {
        var msg = null;
        NEKUI.KLNotify.notify.$on('show', function(evt){
           msg = evt.message;
        });
        NEKUI.KLNotify.show(content, 'success', 10000);
        setTimeout(function(){
            NEKUI.KLNotify.close(msg);
        }, 2000);
        NEKUI.KLNotify.notify.$on('close', function(evt){
            console.log(evt);
        });
    }
});

closeAll方法

关闭所有消息，静态方法，通过NEKUI.KLNotify调用

<kl-button title="closeAll" on-click="{this.show('2s后调用closeAll方法')}" />

var component = new NEKUI.Component({
    template: template,
    show: function(content) {
       NEKUI.KLNotify.show(content, 'success', 0);
       setTimeout(function(){
            // 关闭所有
            NEKUI.KLNotify.closeAll();
       }, 2000)
    }
});

配置信息contentTemplate

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

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

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

特殊类型方法

show方法简写，弹出特殊类型消息，方法有success、error、warning、error。可以传递两个参数，第一个为消息内容，第二位消息展示时间，同duration属性

<kl-button title="notice" on-click="{this.show('notice', 6000)}" />
<kl-button title="success" on-click="{this.show('success', 5000)}" />
<kl-button title="warning" on-click="{this.show('warning', 4000)}" />
<kl-button title="error" on-click="{this.show('error', 3000)}" />

var component = new NEKUI.Component({
    template: template,
    show: function(state, duration) {
        NEKUI.KLNotify[state]('特殊方法：' + state, duration);
    }
});

API

KLNotify

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.position]	`string`	`"topcenter"`	=> 通知的位置，可选参数：`topcenter`、`topleft`、`topright`、`bottomcenter`、`bottomleft`、`bottomright`、`static`
[options.data.duration]	`number`	`2000`	=> 每条消息默认的停留毫秒数，如果为`0`，则表示消息常驻不消失，默认为`2秒`。
[options.data.single]	`boolean`	`false`	=> 是否始终显示一条，`true`表示是，`false`表示否
[options.data.visible]	`boolean`	`true`	=> 是否显示,`true`表示是、`false`表示否
[options.data.class]	`string`		=> 补充`class`
[options.data.contentTemplate]	`string`		=> 内容模板，用于支持复杂内容的自定义。

show 打开一条消息时触发Event

Name	Type	Description
sender	`object`	事件发送对象
message	`object`	弹出的消息对象

close 关闭某条消息时触发Event

Name	Type	Description
sender	`object`	事件发送对象
message	`object`	关闭了的消息对象

.showstatic method

Param	Type	Default	Description
text	`string`		消息内容
state	`string`		消息状态，可选参数：`notice`、`success`、`warning`、`error`
duration	`number`	`2000`	该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。

.closestatic method

Param	Type	Description
message	`object`	需要关闭的消息对象

.closeAllstatic method

.successstatic method

Param	Type	Default	Description
text	`string`		消息内容
duration	`number`	`2000`	该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。

.warningstatic method

Param	Type	Default	Description
text	`string`		消息内容
duration	`number`	`2000`	该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。

.noticestatic method

Param	Type	Default	Description
text	`string`		消息内容
duration	`number`	`2000`	该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。

.errorstatic method

Param	Type	Default	Description
text	`string`		消息内容
duration	`number`	`2000`	该条消息的停留毫秒数。如果为0，则表示消息常驻不消失。如果不填，则使用notify默认的duration。