Toast

弹出层 / Toast提示组件

Toast是移动端比较灵活的通知组件, 可以用它来处理反馈信息或者展示系统消息. Toast组件可以出现在内容的上面/下面/中间, 可以定时关闭, 也可以手动点击Toast的关闭按钮, 形式较为灵活.

还有

Toast组件本身并不是单例对象, 但是调用指纹都为Toast('Toast Bottom Only String'), 因此可能会问:
如何程序关闭toast呢? 目前, 关闭Toast只有三个方法:

1. duration 过期时间
2. showCloseButton 关闭按钮
3. 当上面两个都设置了, 则只执行第二个配置
4. let toast = Toast('Toast Bottom Only String')返回toast实例, 执行toast.dismiss()执行关闭

因此使用Toast需要知道这一点.

此外

• 在Toast的传入参数中定义onDismiss回调函数, 可以在Toast关闭及动画结束后可以进行一些操作.
• dismissOnPageChange表示如果路由切换自动关闭Toast, 这个属性默认值为false.

实例化Toast的方法

1. 只传入Message

 Toast('Bottom was added successfully')

2. 传入Message和Duration

 Toast('Bottom was added successfully',1000)

3. 传入Options对象

 Toast({
    message: 'Bottom was added successfully',
    duration: 3000,
    position: 'bottom',
    dismissOnPageChange: true,
    onDismiss () {
      console.debug('2 onDismiss in promise success!')
    }
 })
 Toast({
    message: 'Top with Button was added successfully',
    duration: 3000, // 这个不生效
    position: 'top',
    showCloseButton: true,
    closeButtonText: '好的',
    cssClass: 'showCloseBtnToastCssClass',
    dismissOnPageChange: true,
    onDismiss () {
      console.debug('5 onDismiss in promise success!')
    }
 })