Toast 及时反馈

一、概述

定义

用于在屏幕居中显示一个操作的轻量级反馈。

使用场景

• 必要时提醒用户

• 通常是操作后响应出现

类型

• 不含图标

• 含图标

• 含操作

二、不含图标

单纯的文字提示。

交互说明

1.一般出现时间为 2s

2.toast 最长长度为 xxx,超过一行时，折行显示

<se-button @click="showToast1">单行</se-button>
<se-button @click="showToast2">显示最宽的宽度</se-button>
<script>
  export default {
    methods: {
      showToast1() {
        this.$showToast({
          title: '字数尽量控制为单行',
          icon: 'none'
        })
      },
      showToast2() {
        this.$showToast({
          title: '支持多行显示，但最多控制在两行以内，超出则折行显示',
          icon: 'none'
        })
      }
    }
  }
</script>

设置透明蒙层

通过显示透明蒙层，防止触摸穿透

<se-button @click="show">显示</se-button>

<script>
  export default {
    methods: {
      show() {
        this.$showToast({
          title: '字数尽量控制为单行',
          icon: 'none',
          mask: true
        })
      }
    }
  }
</script>

指定关闭时间

通过 duration 设置 toast 显示时间

<se-button @click="show">5秒后消失</se-button>

<script>
  export default {
    methods: {
      show() {
        this.$showToast({
          title: '字数尽量控制为单行',
          icon: 'none',
          duration: 5000
        })
      }
    }
  }
</script>

三、含图标

图标给予用户更强的提示，通过图标可明确告知用户的状态。

交互说明

1.出现时间为 2s

2.图标和文字内容保持一致

默认状态一共四种：加载(loading)、成功(success)、失败(failure)、警示(warning)。状态类文案最好控制在 7 字内，以防显示不全

<se-button type="primary" @click="showSuccess">成功</se-button>
<se-button @click="showLoading">加载</se-button>
<se-button type="danger" @click="showFailure">失败</se-button>
<se-button type="warn" @click="showWarning">警示</se-button>

<script>
  export default {
    methods: {
      showLoading() {
        this.$showLoading({
          title: '加载中'
        })

        setTimeout(() => {
          this.$hideLoading({
            success: function() {
              console.log('hide success')
            },
            failure: function() {
              console.log('hide failure')
            },
            complete: function() {
              console.log('hide complete')
            }
          })
        }, 5000)
      },
      showSuccess() {
        this.$showToast({
          title: '发送短信验证码成功',
          icon: 'success'
        })
      },
      showFailure() {
        this.$showToast({
          title: '操作失败',
          icon: 'failure'
        })
      },
      showWarning() {
        this.$showToast({
          title: '禁止提交',
          icon: 'warning'
        })
      }
    }
  }
</script>

自定义图标

通过指定 image 值来自定义图标

<se-button @click="show">自定义图标</se-button>

<script>
  export default {
    methods: {
      show() {
        this.$showToast({
          title: '搜索中',
          image: 'https://s5.ssl.qhres.com/static/9c95b612151899a3.svg'
        })
      }
    }
  }
</script>

四、含操作

含有操作，允许用户进一步操作。

交互说明

1.出现时间以为 2s

2.左侧为反馈提示，右侧为操作

<se-button @click="show">收藏</se-button>
<script>
  export default {
    methods: {
      show() {
        this.$showToast({
          title:
            '收藏成功<a href="#" style="color: #01D567; margin-left: 10px; text-decoration: none;">立即查看</a>',
          icon: 'none'
        })
      }
    }
  }
</script>

五、支持 text/VNode/HTML

title 属性虽然支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。 请确保 title 的内容是可信的，永远不要将用户提交的内容赋值给 message 属性。

<se-button @click="showText">默认使用 text</se-button>
<se-button @click="showVNode">使用 VNode</se-button>
<se-button @click="showHTML">使用 HTML 片段</se-button>

<script>
  export default {
    methods: {
      showVNode() {
        const h = this.$createElement
        this.$showToast({
          title: h('div', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ]),
          icon: 'none'
        })
      },
      showText() {
        this.$showToast({
          title: '这是普通文本片段',
          icon: 'none'
        })
      },
      showHTML() {
        this.$showToast({
          title: '<strong>这是 <i>HTML</i> 片段</strong>',
          icon: 'none'
        })
      }
    }
  }
</script>

Methods

1. this.$showToast(Object object) 显示消息提示框

为避免 XSS 攻击，请确保传入 title 的 HTML 片段是可信的。

object.icon 的合法值

2. this.$hideToast(Object object) 隐藏消息提示框

3. this.$showLoading(Object object) 显示 loading 提示框。需主动调用 this.$hideLoading 才能关闭提示框

为避免 XSS 攻击，请确保传入 title 的 HTML 片段是可信的。

4. this.$hideLoading(Object object) 隐藏消息提示框

注意

• this.$showLoading 和 this.$showToast 同时只能显示一个
• this.$showLoading 应与 this.$hideLoading 配对使用