消息提示 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()

Methods

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

弹出一个消息

toast.close(item)

关闭某条消息

toast.closeAll()

关闭所有消息

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

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

Static Methods

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

弹出一个消息

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

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

Toast.close(item)

关闭某条消息

Toast.closeAll()

关闭所有消息

Events

toast.$on('show')

弹出一个消息时触发

toast.$on('close')

关闭某条消息时触发