Toast 消息提示

此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方，具体表现在：

• uView的toast有5中主题可选
• 可以配置toast结束后，跳转相应URL
• 目前没有加载中的状态，请用uni的uni.showLoading，这个需求uni已经做得很好

注意：

由于uni中无法通过js创建元素，所以需要在页面中调用<toast />组件，再通过ref开启

基本使用

以下为一个模拟登录成功后，弹出toast提示，并在一定时间(默认2000ms)后，自动跳转页面到个人中心页(也可以配置跳转的参数)的示例

<template>
    <view>
        <u-toast ref="uToast" />
    </view>
</template>
<script>
    export default {
        methods: {
            showToast() {
                this.$refs.uToast.show({
                    title: '登录成功',
                    type: 'success',
                    url: '/pages/user/index'
                })
            }
        }
    }
</script>

配置toast主题

一共有6种主题可选，如下：

• default-灰黑色，最普通的场景，此为默认主题，可以不用填type参数
• error-红色，代表错误
• success-绿色，代表成功
• warning-黄色，代表警告
• info-灰色，比default浅一点
• primary-蓝色，uView的主色调

除了default状态，其他5中主题，都是默认带有一个左边的图标，可以通过配置icon参数为none来取消

this.$refs.uToast.show({
    title: '操作成功',
    // 如果不传此type参数，默认为default，也可以手动写上 type: 'default'
    // type: 'success', 
    // 如果不需要图标，请设置为false
    // icon: false
})

toast结束跳转URL

• 如果配置了src参数，在toast结束的时候，就会用uni.navigateTo(默认)或者uni.switchTab(需另外设置isTab为true)
• 如果配置了params参数，就会在跳转时自动在URL后面拼接上这些参数，具体用法如下：

this.$refs.uToast.show({
    title: '操作成功',
    url: '/pages/user/index',
    param: {
        id: 1,
        menu: 3
    }
})

API

Props

Params

这些参数为通过ref调用<toast/>组件内部的show方法时，需要传递参数

Methods

方法是通过ref调用的，参见上方说明 注意：所有有关ref的调用，都不能在页面的onLoad生命周期调用，因为此时组件尚未创建完毕，会报错，应该在onReady生命周期调用。