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 配置。

事件回调

<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 配置

事件

实例方法

原文:

https://didi.github.io/cube-ui/#/zh-CN/docs/toast