消息提示 Toast
全局消息提示,能够自动淡出。
示例
基本形式
<button class="u-btn u-btn-primary" on-click={this.show()}>Toast</button>
let component = new RGUI.Component({
template,
show() {
RGUI.Toast.show('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>
let component = new RGUI.Component({
template,
show(state) {
RGUI.Toast[state](state + ' message');
},
});
位置扩展
<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>
let component = new RGUI.Component({
template,
config() {
this.toasts = [
new RGUI.Toast({ data: { position: 'top-center' } }),
new RGUI.Toast({ data: { position: 'top-left' } }),
new RGUI.Toast({ data: { position: 'top-right' } }),
new RGUI.Toast({ data: { position: 'bottom-center' } }),
new RGUI.Toast({ data: { position: 'bottom-left' } }),
new RGUI.Toast({ data: { position: 'bottom-right' } }),
];
},
show(index) {
var toast = this.toasts[index];
toast.show('position: ' + toast.data.position);
},
});
嵌入文档流
上面的toast都是以fixed
的形式固定在浏览器中,也可以将Toast嵌入文档流。先将toast注入到需要的位置,然后设置toast的position="static"
。
<p><button class="u-btn u-btn-primary" on-click={this.show()}>static</button></p>
<toast ref="toast" position="static" duration="0" />
let component = new RGUI.Component({
template,
show() {
this.$refs.toast.show('static toast');
},
});
消息停留时间
可以通过设置toast的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>
let component = new RGUI.Component({
template,
show(duration) {
RGUI.Toast.show('duration: ' + duration + ' ms', duration);
},
});
始终显示一条
将single
设置为true
,可以让toast始终只显示一条消息。
<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>
let component = new RGUI.Component({
template,
config() {
this.toast = new RGUI.Toast({ data: {single: true} });
},
number: 1,
show: function(state) {
this.toast[state]('message ' + this.number);
this.number++;
}
});
API
Class
Toast
继承自。
Options
new Toast()
参数 | 类型 | 默认值 | 数据流向 | 描述 |
---|---|---|---|---|
data | Object | 绑定属性 | ||
data.position | string | 'top-center' | outside => inside | 消息提示的位置,可选参数:`top-center`、`top-left`、`top-right`、`bottom-center`、`bottom-left`、`bottom-right`、`static` |
data.duration | number | 2000 | outside => inside | 每条消息默认的停留毫秒数,如果为0,则表示消息常驻不消失。 |
data.single | boolean | false | outside => inside | 是否始终显示一条 |
data.visible | boolean | true | outside => inside | 是否显示 |
data.class | string | '' | outside => inside | 补充class |
Methods
toast.show(text[, duration][, state])
弹出一个消息
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
text | string | '' | 消息内容 |
duration | number | toast.duration | 该条消息的停留毫秒数。如果为0,则表示消息常驻不消失。如果不填,则使用toast默认的duration。 |
state | string | '' | 消息状态,可选参数:`info`、`success`、`warning`、`error` |
返回值 | 类型 | 描述 | |
item | object | 返回弹出的消息项 |
toast.close(item)
关闭某条消息
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
item | object | 需要关闭的消息项 | |
返回值 | 类型 | 描述 | |
无返回值 |
toast.closeAll()
关闭所有消息
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
无参数 | |||
返回值 | 类型 | 描述 | |
无返回值 |
toast.[info|success|warning|error](text[, duration])
弹出特殊类型的消息。为show方法的简写方式。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
text | string | '' | 消息内容 |
duration | number | toast.duration | 该条消息的停留毫秒数。如果为0,则表示消息常驻不消失。如果不填,则使用toast默认的duration。 |
返回值 | 类型 | 描述 | |
无返回值 |
Static Methods
Toast.show(text[, duration][, state])
弹出一个消息
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
text | string | '' | 消息内容 |
duration | number | toast.duration | 该条消息的停留毫秒数。如果为0,则表示消息常驻不消失。如果不填,则使用toast默认的duration。 |
state | string | '' | 消息状态,可选参数:`info`、`success`、`warning`、`error` |
返回值 | 类型 | 描述 | |
item | object | 返回弹出的消息项 |
Toast.[info|success|warning|error](text[, duration])
弹出特殊类型的消息。为show方法的简写方式。
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
text | string | '' | 消息内容 |
duration | number | toast.duration | 该条消息的停留毫秒数。如果为0,则表示消息常驻不消失。如果不填,则使用toast默认的duration。 |
返回值 | 类型 | 描述 | |
无返回值 |
Toast.close(item)
关闭某条消息
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
item | object | 需要关闭的消息对象 | |
返回值 | 类型 | 描述 | |
无返回值 |
Toast.closeAll()
关闭所有消息
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
无参数 | |||
返回值 | 类型 | 描述 | |
无返回值 |
Events
toast.$on('show')
弹出一个消息时触发
属性 | 类型 | 描述 |
---|---|---|
sender | object | 事件发送对象 |
item | object | 弹出的消息项 |
toast.$on('close')
关闭某条消息时触发
属性 | 类型 | 描述 |
---|---|---|
sender | object | 事件发送对象 |
item | object | 关闭了的消息对象 |