Orange UI

# Toast 吐司

类似吐司机一样弹出消息/通知

# 默认三个位置

浏览

代码演示

<div>
  <o-button @click="showToastTop">Click me</o-button>
  <o-button @click="showToastTop">Top</o-button>
  <o-button @click="showToastMiddle">Middle</o-button>
  <o-button @click="showToastBottom">Bottom</o-button>
</div>

methods:{
  showToastTop(){
    this.showToast('top')
  },
  showToastMiddle(){
    this.showToast('middle')
  },
  showToastBottom(){
    this.showToast('bottom')
  },
  showToast(position){
    this.$toast('This is content of toast',{
      position: position,
      closeButton:{
        text: 'Close',
        callback(toast){
          console.log('用户知道了')
        }
      }
    })
  }
}

# 设置自动关闭

  • 可设置 Toast 组件自动关闭，默认不能自动关闭。
  • 可自行设置自动关闭延迟时间。

设置为自动关闭，延迟时间为2s。

浏览

代码演示

<div>
    <o-button @click="showToastTop">Click me</o-button>
</div>

methods:{
  showToastTop(){
    this.showToast('top')
  },
  showToast(position){
    this.$toast('This is content of toast',{
      position: position,
      autoClose: true,
      autoCloseDelay: 3,
      closeButton:{
        text: 'Close',
        callback(toast){
          console.log('用户知道了')
        }
      }
    })
  }
}

# 自定义Toast

  • 可自定义设置 Toast 组件的中内容和关闭文本。
  • 可自定义回调函数，进行 Toast 组件关闭后接下来的操作

浏览

代码演示

<div>
    <o-button @click="showToastTop">Click me</o-button>
</div>

methods:{
    showToastTop(){
      this.showToast('top')
    },
    showToast(position){
      this.$toast('自定义内容',{
        position: position,
        closeButton:{
          text: '请关闭',
          callback(toast){
            alert('用户知道了')
          }
        }
      })
    }
}

←