通知 Notify

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

示例

基本形式

<button class="u-btn u-btn-primary" on-click={this.show()}>Notify</button>
var component = new RGUI.Component({
    template: template,
    show: function() {
        RGUI.Notify.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 RGUI.Component({
    template: template,
    show: function(state) {
        RGUI.Notify[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 RGUI.Component({
    template: template,
    config: function() {
        this.notifies = [
            new RGUI.Notify({data: {position: 'topcenter'} }),
            new RGUI.Notify({data: {position: 'topleft'} }),
            new RGUI.Notify({data: {position: 'topright'} }),
            new RGUI.Notify({data: {position: 'bottomcenter'} }),
            new RGUI.Notify({data: {position: 'bottomleft'} }),
            new RGUI.Notify({data: {position: 'bottomright'} })
        ];
    },
    show: function(index) {
        var notify = this.notifies[index];
        notify.show('Position: ' + notify.data.position + '.');
    }
});

嵌入文档流

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

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

消息停留时间

可以通过设置notifyduration参数设置所有消息的停留时间,也可以在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 RGUI.Component({
    template: template,
    show: function(duration) {
        RGUI.Notify.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 RGUI.Component({
    template: template,
    config: function() {
        this.notify = new RGUI.Notify({data: {single: true} });
    },
    number: 1,
    show: function(state) {
        this.notify[state]('Message ' + this.number + '.');
        this.number++;
    }
});

API

Class

Notify

继承自Component

Options

new Notify()

参数类型默认值数据流向描述
dataobject绑定属性
data.positionstring'topcenter'outer => inner通知的位置,可选参数:`topcenter`、`topleft`、`topright`、`bottomcenter`、`bottomleft`、`bottomright`、`static`
data.durationnumber2000outer => inner每条消息默认的停留毫秒数,如果为0,则表示消息常驻不消失。
data.singlebooleanfalseouter => inner是否始终显示一条
data.visiblebooleantrueouter => inner是否显示
data.classstring''outer => inner补充class

Methods

notify.show(text[, state][, duration])

弹出一个消息

参数类型默认值描述
textstring''消息内容
statestringnull消息状态,可选参数:`info`、`success`、`warning`、`error`
durationnumbernotify.duration该条消息的停留毫秒数。如果为0,则表示消息常驻不消失。如果不填,则使用notify默认的duration。
返回值类型描述
无返回值

notify.close(message)

关闭某条消息

参数类型默认值描述
messageobject需要关闭的消息对象
返回值类型描述
无返回值

notify.closeAll()

关闭所有消息

参数类型默认值描述
无参数
返回值类型描述
无返回值

notify.[info|success|warning|error](text[, duration])

弹出特殊类型的消息。为show方法的简写方式。

参数类型默认值描述
textstring''消息内容
durationnumbernotify.duration该条消息的停留毫秒数。如果为0,则表示消息常驻不消失。如果不填,则使用notify默认的duration。
返回值类型描述
无返回值

Static Methods

Notify.show(text[, state][, duration])

弹出一个消息

参数类型默认值描述
textstring''消息内容
statestringnull消息状态,可选参数:`info`、`success`、`warning`、`error`
durationnumbernotify.duration该条消息的停留毫秒数。如果为0,则表示消息常驻不消失。如果不填,则使用notify默认的duration。
返回值类型描述
无返回值

Notify.[info|success|warning|error](text[, duration])

弹出特殊类型的消息。为show方法的简写方式。

参数类型默认值描述
textstring''消息内容
durationnumbernotify.duration该条消息的停留毫秒数。如果为0,则表示消息常驻不消失。如果不填,则使用notify默认的duration。
返回值类型描述
无返回值

Notify.close(message)

关闭某条消息

参数类型默认值描述
messageobject需要关闭的消息对象
返回值类型描述
无返回值

Notify.closeAll()

关闭所有消息

参数类型默认值描述
无参数
返回值类型描述
无返回值

Events

notify.$on('show')

弹出一个消息时触发

属性类型描述
senderobject事件发送对象
messageobject弹出的消息对象

notify.$on('close')

关闭某条消息时触发

属性类型描述
senderobject事件发送对象
messageobject关闭了的消息对象