Toast 消息提示

示例

类型

Toast 有四种类型,分别是 infosuccesswarningerror,可以通过 type 属性指定不同的类型。

在 GitHub 上编辑此页编辑
<template>
<article>
  <section>
    <veui-toast
      type="info"
      open
      message="Press any key to continue..."
    />
  </section>
  <section>
    <veui-toast
      type="success"
      open
      message="Your profile has been updated."
    />
  </section>
  <section>
    <veui-toast
      type="warning"
      open
    >
      v1 is deprecated. Use v2 instead.
    </veui-toast>
  </section>
  <section>
    <veui-toast
      type="error"
      open
      message="Uncaught SyntaxError: Unexpected token +"
    />
  </section>
</article>
</template>

<script>
import { Toast } from 'veui'

export default {
  components: {
    'veui-toast': Toast
  }
}
</script>

<style lang="less" scoped>
.veui-toast {
  position: relative;
}

section {
  margin-bottom: 20px;
}
</style>

命令式调用

可使用 veui/plugins/toast 模块加载 toast 插件进行命令式调用。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-button
    @click="$toast.info({
      message: 'Press any key to continue...',
      duration: 5000
    })"
  >
    Info
  </veui-button>
  <veui-button @click="$toast.success('Your profile has been updated.')">
    Success
  </veui-button>
  <veui-button @click="$toast.warn('v1 is deprecated. Use v2 instead.')">
    Warn
  </veui-button>
  <veui-button @click="$toast.error('Uncaught SyntaxError: Unexpected token +')">
    Error
  </veui-button>
</article>
</template>

<script>
import Vue from 'vue'
import { Button } from 'veui'
import toast from 'veui/plugins/toast'

Vue.use(toast)

export default {
  components: {
    'veui-button': Button
  }
}
</script>

<style lang="less" scoped>
.veui-button {
  margin-right: 20px;
}
</style>

API

属性

名称类型默认值描述
openbooleanfalse

.sync

是否显示消息提示。

typestring'success'

警告框类型。

描述
info信息提示样式。
success成功样式。
warning警告样式。
error错误样式。
messagestring-消息内容。
durationnumbertoast.duration消息展示时间毫秒数,超过此事件则消息提示自动关闭。

插槽

名称描述
default内容区。默认显示 message 属性的内容。

事件

名称描述
close消息自动关闭后触发。

全局配置

配置项类型默认值描述
toast.durationnumber3000消息默认展示时间毫秒数。

图标

名称描述
info普通信息。
success成功状态。
warning警告状态。
error错误状态。
在 GitHub 上编辑此页编辑