通知 KLNotify

基本形式

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

<kl-button type="tertiary" 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="g-row">
    <kl-button type="tertiary" title="topcenter" on-click="{this.show('topcenter')}" />   
    <kl-button type="tertiary" title="topleft" on-click="{this.show('topleft')}" />   
    <kl-button type="tertiary" title="topright" on-click="{this.show('topright')}" />   
    <kl-button type="tertiary" title="bottomcenter" on-click="{this.show('bottomcenter')}" />   
</div>
<div class="g-row">
    <kl-button type="tertiary" title="bottomleft" on-click="{this.show('bottomleft')}" />   
    <kl-button type="tertiary" title="bottomright" on-click="{this.show('bottomright')}" />   
    <kl-button type="tertiary" 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);
    }
});

配置信息single

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

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

<kl-button type="tertiary" title="info" on-click="{this.show('info')}" />  
<kl-button type="tertiary" title="success" on-click="{this.show('success')}" />  
<kl-button type="tertiary" title="warning" on-click="{this.show('warning')}" />  
<kl-button type="tertiary" 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++;
    }
});

close方法

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

<kl-button type="tertiary" 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);
        });
        
    }
});

特殊类型方法

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

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

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

配置信息duration

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

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

<kl-button type="tertiary" title="消息提示不自动关闭" on-click="{this.show(0)}" />  
<kl-button type="tertiary" title="1秒后自动关闭" on-click="{this.show(1000)}" />  
<kl-button type="tertiary" 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)
        }
    },
});

配置信息visible

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

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

<kl-button type="tertiary" title="true" on-click="{this.show(true)}" />  
<kl-button type="tertiary" 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 type="tertiary" 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、info、warning、error，默认为info；第三个参数duration消息展示时间，单位为ms，默认2秒，如果为0，则表示永不消失。*

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

<kl-button type="tertiary" title="参数一" on-click="{this.show('只传递参数一')}" />  
<kl-button type="tertiary" title="一和二" on-click="{this.show('传递参数一和二', 'error')}" />  
<kl-button type="tertiary" 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);
    }
});

closeAll方法

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

<kl-button type="tertiary" 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)
    }
});

API

KLNotify

KLNotify

show 打开一条消息时触发Event

close 关闭某条消息时触发Event

.showstatic method

.closestatic method

.closeAllstatic method

.successstatic method

.warningstatic method

.infostatic method

.errorstatic method