Alert 提示
示例
类型
Alert
有四种类型,分别是 success
、info
、warning
和 error
,可以通过 type
属性指定不同的类型。
可将消息内容写在默认插槽中,也可以通过 message
属性进行指定。
<template>
<article>
<veui-alert type="success">
Your profile has been updated.
</veui-alert>
<veui-alert type="info">
Press any key to continue...
</veui-alert>
<veui-alert type="warning">
<code>scope</code> is deprecated. Use <code>slot-scope</code> instead.
</veui-alert>
<veui-alert
type="error"
message="Uncaught SyntaxError: Unexpected token +"
/>
</article>
</template>
<script>
import { Alert } from 'veui'
export default {
components: {
'veui-alert': Alert
}
}
</script>
多消息切换
可以将 message
属性指定为数组,来实现展现多条可切换的消息提示。
1/4
可以指定 closable
属性为 true
来允许提示被用户主动关闭,还可以通过指定 close-label
属性来将关闭按钮以文字形式展现。
<template>
<article>
<veui-alert
type="info"
close-label="Got it"
closable
:open.sync="open"
:message="messages"
/>
<section v-if="!open">
<veui-button @click="open = true">
Open
</veui-button>
</section>
</article>
</template>
<script>
import { Alert, Button } from 'veui'
export default {
components: {
'veui-alert': Alert,
'veui-button': Button
},
data () {
return {
open: true,
messages: [
'Component data must be a function.',
'Prop definitions should be as detailed as possible.',
'Always use key with v-for.',
'Never use v-if on the same element as v-for.'
]
}
}
}
</script>
API
属性
名称 | 类型 | 默认值 | 描述 | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
type | string | 'success' | 警告框类型。
| ||||||||||
message | string|Array<string> | - | 消息内容,当类型为数组时会显示多条数据并支持切换上一条/下一条。 | ||||||||||
closable | Boolean | false | 是否允许关闭。 | ||||||||||
close-label | string | - | 用文本代替关闭按钮,如“不再显示”。 | ||||||||||
open | boolean | true |
是否显示消息。 | ||||||||||
index | number | 0 |
在有多条数据时,当前显示的消息的索引。 |
插槽
名称 | 描述 | |||||||||
---|---|---|---|---|---|---|---|---|---|---|
default | 消息内容区域。 默认内容:消息文本。
| |||||||||
content | 整个消息区域,包括状态图标、切换按钮、关闭按钮等。 |
图标
名称 | 描述 |
---|---|
success | 成功消息。 |
warning | 警告消息。 |
info | 信息消息。 |
error | 错误消息。 |
prev | 上一条。 |
next | 下一条。 |
close | 关闭。 |