通知 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);
    }
});

配置信息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)
        }
    },
});

配置信息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++;
    }
});

配置信息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);
    }
});

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);
        });
        
    }
});

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)
    }
});

特殊类型方法

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);
    }
});

API

KLNotify

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

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 消息状态，可选参数：info、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。

.infostatic 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。
模态框 确认提示
想让文档更完善？ 来 GitHub 提个 PR 吧！