创建显示消息的通知,并且能自动淡出。类似Android中的Toast。
代码演示
基本形式
<button class="u-btn u-btn-primary" on-click={this.show()}>Notify</button>
var component = new NEKUI.Component({template: template,show: function() {NEKUI.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 NEKUI.Component({template: template,show: function(state) {NEKUI.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 NEKUI.Component({template: template,config: function() {this.notifies = [new NEKUI.Notify({data: {position: 'topcenter'} }),new NEKUI.Notify({data: {position: 'topleft'} }),new NEKUI.Notify({data: {position: 'topright'} }),new NEKUI.Notify({data: {position: 'bottomcenter'} }),new NEKUI.Notify({data: {position: 'bottomleft'} }),new NEKUI.Notify({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 NEKUI.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 NEKUI.Component({template: template,show: function(duration) {NEKUI.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 NEKUI.Component({template: template,config: function() {this.notify = new NEKUI.Notify({data: {single: true} });},number: 1,show: function(state) {this.notify[state]('Message ' + this.number + '.');this.number++;}});
API
Classes
Members
- notify
- 直接初始化一个实例
Functions
- config()
- init()
- [duration]) 弹出一个消息([text], [state], duration]) 弹出一个消息) ⇒
void
- close(message) 关闭某条消息(message) 关闭某条消息) ⇒
void
- closeAll() 关闭所有消息() ⇒
void
- [duration]) 弹出特殊类型的消息。为show方法的简写方式。([text], duration]) 弹出特殊类型的消息。为show方法的简写方式。) ⇒
void
- [duration]) 弹出一个消息([text], [state], duration]) 弹出一个消息) ⇒
void
- [duration]) 弹出特殊类型的消息。为show方法的简写方式。([text], duration]) 弹出特殊类型的消息。为show方法的简写方式。) ⇒
void
Events
Notify
Kind: global classExtend: Component
new Notify()
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 |
notify
直接初始化一个实例
Kind: global variableState: Notify
config()
Kind: global functionAccess: protected
init()
Kind: global functionAccess: protected
close(message) 关闭某条消息(message) ⇒ void
Kind: global functionAccess: public
Param | Type | Description |
---|---|---|
message | object | 需要关闭的消息对象 |
closeAll() 关闭所有消息() ⇒ void
Kind: global functionAccess: public
“show 弹出一个消息时触发”
Kind: event emittedProperties
Name | Type | Description |
---|---|---|
sender | object | 事件发送对象 |
message | object | 弹出的消息对象 |
“close 关闭某条消息时触发”
Kind: event emittedProperties
Name | Type | Description |
---|---|---|
sender | object | 事件发送对象 |
message | object | 关闭了的消息对象 |
.close(message) 关闭某条消息(message) ⇒ void
Kind: static functionAccess: public
Param | Type | Description |
---|---|---|
message | object | 需要关闭的消息对象 |
.closeAll() 关闭所有消息() ⇒ void
Kind: static functionAccess: public