Toast 消息提示
示例
类型
Toast
有四种类型,分别是 info
、success
、warning
和 error
,可以通过 type
属性指定不同的类型。
Press any key to continue... Your profile has been updated. scope
is deprecated. Use slot-scope
instead. Uncaught SyntaxError: Unexpected token + <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
>
<code>scope</code> is deprecated. Use <code>slot-scope</code> 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>
命令式调用
可使用 veui/plugins/toast
模块加载 toast
插件进行命令式调用。
<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('scope is deprecated. Use slot-scope 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>
API
属性
名称 | 类型 | 默认值 | 描述 |
---|
open | boolean | false | 是否显示消息提示。 |
type | string | 'success' | 警告框类型。 值 | 描述 |
---|
info | 信息提示样式。 | success | 成功样式。 | warning | 警告样式。 | error | 错误样式。 |
|
message | string | - | 消息内容。 |
duration | number | toast.duration | 消息展示时间毫秒数,超过此事件则消息提示自动关闭。 |
插槽
名称 | 描述 |
---|
default | 内容区。默认显示 message 属性的内容。 |
事件
全局配置
配置项 | 类型 | 默认值 | 描述 |
---|
toast.duration | number | 3000 | 消息默认展示时间毫秒数。 |
图标
名称 | 描述 |
---|
info | 普通信息。 |
success | 成功状态。 |
warning | 警告状态。 |
error | 错误状态。 |