Toast 轻提示层


基础用法

使用contentdirectionmaskautoClose属性来定义 Toast 的样式。

  1. this.$toast.text(content, direction, mask, autoClose, callBack)
  2. this.$toast.loading(mask, autoClose, callBack)
  3. methods: {
  4. toastClick1 () {
  5. this.$toast.text({
  6. content: '太长会换行呢,15个字以内最好',
  7. direction: 'bottom',
  8. callBack () {
  9. setTimeout(() => {
  10. this.$toast.text({content: '关闭后回调操作', direction: 'bottom'})
  11. }, 2000)
  12. }
  13. })
  14. },
  15. toastClick2 () {
  16. this.$toast.loading({
  17. mask: false
  18. })
  19. }
  20. }

属性

参数 说明 类型 可选值 默认值
content 内容 string 自定义 loading无
mask 是否有背景 Boolean - text为false,loading为true
direction 方向 string top,bottom,center text独有,默认center
autoClose 自动关闭 Boolean - 默认为3秒,alert有,confirm无
callBack 回调函数 Function 自定义 -

原文: https://monw3c.github.io/xmui/#/components/toast