Toast

Toast组件主要用于非模态信息提醒，无需用户交互。

注： 由于此组件基于 create-api 实现，所以在使用之前，请确保自己了解过 create-api。

示例

• 显示时间设置

  <cube-button @click="showToastTime">Toast - time 1s</cube-button>
  <cube-button @click="showToastTime0">Toast - time 0</cube-button>
  

  export default {
    methods: {
      showToastTime() {
        const toast = this.$createToast({
          time: 1000,
          txt: 'Toast time 1s'
        })
        toast.show()
      },
      showToastTime0() {
        const toast = this.$createToast({
          time: 0,
          txt: 'Toast time 0'
        })
        toast.show()
        setTimeout(() => {
          toast.hide()
        }, 2000)
      }
    }
  }
  

  time 字段决定了 Toast 显示的时间，如果设置为 0，则不会消失，需要手动调用组件的 hide 方法。

• 显示遮罩

  <cube-button @click="showToastMask">Toast- with mask</cube-button>
  

  export default {
    methods: {
      showToastMask () {
        const toast = this.$createToast({
          txt: 'Loading...',
          mask: true
        })
        toast.show()
      }
    }
  }
  

  mask 设置为 true 时会显示遮罩。

• 类型设置

  <cube-button @click="showToastType">Toast - type</cube-button>
  

  export default {
    methods: {
      showToastType() {
        const toast = this.$createToast({
          txt: 'Correct',
          type: 'correct'
        })
        toast.show()
      }
    }
  }
  

  type 字段决定了 Toast 的显示图标类型，具体对应关系，参见下方的 Props 配置。

• 纯文本类型^1.11.0

  <cube-button @click="showToastTxtOnly">Toast - txt only</cube-button>
  

  export default {
    methods: {
      showToastTxtOnly() {
        this.toast = this.$createToast({
          txt: 'Plain txt',
          type: 'txt'
        })
        this.toast.show()
      }
    }
  }
  

• 事件回调

  <cube-button @click="showToastCallback">Toast - callback</cube-button>
  

  export default {
    methods: {
      showToastCallbak() {
        const toast = this.$createToast({
          txt: 'Timeout',
          time: 1000,
          onTimeout: () => {
            console.log('Timeout')
          }
        })
        toast.show()
      }
    }
  }
  

  除了设置 onTimeout 的形式，还可以通过 $events 传入事件回调。

  export default {
    methods: {
      showToastCallbak() {
        const toast = this.$createToast({
          txt: 'Timeout',
          time: 1000,
          $events: {
            timeout: () => {
              console.log('Timeout')
            }
          }
        })
        toast.show()
      }
    }
  }
  

Props 配置

事件

实例方法