VEUI

VEUI on GitHub
中文

Alert

Demos

Types

Alert component has 4 contextual types, which are success, info, warning and error. Types are specified with the type prop.

Messages can either be specified in the default slot, or via the message prop.

Edit this demo on GitHubEdit
<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>slot-scope</code> is deprecated. Use <code>v-slot</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>

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

Multiple messages

The message prop can be an array to display multiple switchable messages.

Set the closable prop to true to allow the alert message to be closed by users. You can also use the close-label prop to make the close button shown as specified text.

Edit this demo on GitHubEdit
<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

Props

NameTypeDefaultDescription
typestring='success'

The contextual type of the alert message.

ValueDescription
infoInformation message.
successSuccess message.
warningWarning message.
errorError message.
titlestring-The alert title.
messagestring | Array<string>-The alert message. When specified as an array, multiple messages will be displayed with previous/next navigation.
closableboolean=falseWhether the alert is allowed to be closed by users.
openboolean=true

.sync

Whether the message is displayed.

indexnumber=0

.sync

The index of current message displayed when having multiple messages.

Slots

NameDescription
default

The content of the message.

Default: message text.

NameTypeDescription
messagestringMessage text.
indexnumber=The index of current message displayed when having multiple messages.
titleThe content area of the alert title.
extraThe extra content after the alert message.
contentThe content of the whole component, including message text, status icon, previous/next navigation and close button.

Icons

NameDescription
successSuccess message.
warningWarning message.
infoInformation message.
errorError message.
prevPrevious message.
nextNext message.
closeClose alert.
Edit this page on GitHubEdit
© Baidu, Inc. 2023