创建显示消息的通知，并且能自动淡出。类似Android中的Toast。

代码演示

基本形式

<button class="u-btn u-btn-primary" on-click={this.show()}>Notify</button>
var component = new JRUI.Component({
    template: template,
    show: function() {
        JRUI.JRNotify.show('This is a message.');
    }
});

状态扩展

<button class="u-btn u-btn-info" on-click={this.show('info')}>Info</button>
<button class="u-btn u-btn-success" on-click={this.show('success')}>Success</button>
<button class="u-btn u-btn-warning" on-click={this.show('warning')}>Warning</button>
<button class="u-btn u-btn-error" on-click={this.show('error')}>Error</button>
var component = new JRUI.Component({
    template: template,
    show: function(state) {
        JRUI.JRNotify[state](state + ' message.', state);
    }
});

位置扩展

<button class="u-btn" on-click={this.show(0)}>Top Center</button>
<button class="u-btn" on-click={this.show(1)}>Top Left</button>
<button class="u-btn" on-click={this.show(2)}>Top Right</button>
<button class="u-btn" on-click={this.show(3)}>Bottom Center</button>
<button class="u-btn" on-click={this.show(4)}>Bottom Left</button>
<button class="u-btn" on-click={this.show(5)}>Bottom Right</button>
var component = new JRUI.Component({
    template: template,
    config: function() {
        this.notifies = [
            new JRUI.JRNotify({data: {position: 'topcenter'} }),
            new JRUI.JRNotify({data: {position: 'topleft'} }),
            new JRUI.JRNotify({data: {position: 'topright'} }),
            new JRUI.JRNotify({data: {position: 'bottomcenter'} }),
            new JRUI.JRNotify({data: {position: 'bottomleft'} }),
            new JRUI.JRNotify({data: {position: 'bottomright'} })
        ];
    },
    show: function(index) {
        var notify = this.notifies[index];
        notify.show('Position: ' + notify.data.position + '.');
    }
});

嵌入文档流

上面的模式通知都是以fixed的形式固定在浏览器中，如果要将通知嵌入到文档流，先将notify注入到需要的位置，同时设置notify的position="static"。

<button class="u-btn u-btn-primary" on-click={this.show()}>Static</button>
<notify ref="notify" position="static" duration="0" />
var component = new JRUI.Component({
    template: template,
    show: function() {
        this.$refs.notify.show('Static notify.');
    }
});

消息停留时间

可以通过设置notify的duration参数设置所有消息的停留时间，也可以在show的时候单独设置该条消息的停留时间，单位为毫秒。

<button class="u-btn" on-click={this.show(500)}>0.5s</button>
<button class="u-btn" on-click={this.show(1000)}>1s</button>
<button class="u-btn" on-click={this.show(2000)}>2s</button>
<button class="u-btn" on-click={this.show(0)}>常驻</button>
var component = new JRUI.Component({
    template: template,
    show: function(duration) {
        JRUI.JRNotify.show('Duration: ' + duration + ' ms.', null, duration);
    }
});

始终显示一条

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

<button class="u-btn u-btn-info" on-click={this.show('info')}>Info</button>
<button class="u-btn u-btn-success" on-click={this.show('success')}>Success</button>
<button class="u-btn u-btn-warning" on-click={this.show('warning')}>Warning</button>
<button class="u-btn u-btn-error" on-click={this.show('error')}>Error</button>
var component = new JRUI.Component({
    template: template,
    config: function() {
        this.notify = new JRUI.JRNotify({data: {single: true} });
    },
    number: 1,
    show: function(state) {
        this.notify[state]('Message ' + this.number + '.');
        this.number++;
    }
});

API

Classes

JRNotify

Constants

Component

JRNotify 通知

notify

直接初始化一个实例

Functions

config()
init()
duration]) 弹出一个消息([text], [state], [duration]) ⇒ void
close(message) 关闭某条消息(message) ⇒ void
closeAll() 关闭所有消息() ⇒ void
duration]) 弹出特殊类型的消息。为show方法的简写方式。([text], [duration]) ⇒ void
duration]) 弹出一个消息([text], [state], [duration]) ⇒ void
duration]) 弹出特殊类型的消息。为show方法的简写方式。([text], [duration]) ⇒ void

Events

“show 弹出一个消息时触发”
“close 关闭某条消息时触发”

JRNotify

Kind: global class
Extend: Component

new JRNotify()

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，则表示消息常驻不消失。
[options.data.single] boolean false => 是否始终显示一条
[options.data.visible] boolean true => 是否显示
[options.data.class] string => 补充class

Component

JRNotify 通知

Kind: global constant

Author: sensen(rainforest92@126.com)

notify

直接初始化一个实例

Kind: global constant
State: Notify

config()

Kind: global function
Access: protected

init()

Kind: global function
Access: protected

close(message) 关闭某条消息(message) ⇒ void

Kind: global function
Access: public

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

closeAll() 关闭所有消息() ⇒ void

Kind: global function
Access: public

“show 弹出一个消息时触发”

Kind: event emitted
Properties

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

“close 关闭某条消息时触发”

Kind: event emitted
Properties

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

.close(message) 关闭某条消息(message) ⇒ void

Kind: static function
Access: public

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

.closeAll() 关闭所有消息() ⇒ void

Kind: static function
Access: public

← 模态框 确认提示 →