Alert 提示

示例

类型

Alert 有四种类型,分别是 successinfowarningerror,可以通过 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 属性指定为数组,来实现展现多条可切换的消息提示。

可以指定 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

属性

名称类型默认值描述
typestring'success'

警告框类型。

描述
info信息提示样式。
success成功样式。
warning警告样式。
error错误样式。
messagestring|Array<string>-消息内容,当类型为数组时会显示多条数据并支持切换上一条/下一条。
closableBooleanfalse是否允许关闭。
close-labelstring-用文本代替关闭按钮,如“不再显示”。
openbooleantrue

.sync

是否显示消息。

indexnumber0

.sync

在有多条数据时,当前显示的消息的索引。

插槽

名称描述
default

消息内容区域。

默认内容:消息文本。

名称类型描述
messagestring消息文本。
indexnumber=当有多条消息时,当前消息的索引值。
content整个消息区域,包括状态图标、切换按钮、关闭按钮等。

图标

名称描述
success成功消息。
warning警告消息。
info信息消息。
error错误消息。
prev上一条。
next下一条。
close关闭。