AlertBox

Examples

Statuses

AlertBox has three statuses: info, success, and error, which can be specified by the status prop.

<template>
<article>
  <veui-button
    class="button"
    @click="successOpen = true"
  >
    Success
  </veui-button>
  <veui-button
    class="button"
    @click="errorOpen = true"
  >
    Error
  </veui-button>
  <veui-button
    class="button"
    @click="infoOpen = true"
  >
    Info
  </veui-button>

  <veui-alert-box
    status="success"
    :open.sync="successOpen"
  >
    <template #title>
      Success
    </template>
    <div>Saved successfully!</div>
  </veui-alert-box>

  <veui-alert-box
    status="error"
    :open.sync="errorOpen"
  >
    <template #title>
      Error
    </template>
    <div>Not enough disk space!</div>
  </veui-alert-box>

  <veui-alert-box
    status="info"
    :open.sync="infoOpen"
  >
    <template #title>
      Sytstem
    </template>
    <div>The total available storage is 5MB.</div>
  </veui-alert-box>
</article>
</template>

<script>
import { AlertBox, Button } from 'veui'

export default {
  components: {
    'veui-alert-box': AlertBox,
    'veui-button': Button
  },
  data () {
    return {
      successOpen: false,
      errorOpen: false,
      infoOpen: false
    }
  }
}
</script>

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

With title

The title of the alert box can be customized using the title prop or the title slot.

Edit this demo on GitHubEdit

<template>
<article>
  <veui-button
    class="button"
    @click="open1 = true"
  >
    title prop
  </veui-button>
  <veui-button
    class="button"
    @click="open2 = true"
  >
    title slot
  </veui-button>

  <veui-alert-box
    status="success"
    :open.sync="open1"
    title="Success"
    @ok="ok"
  >
    <p>Saved successfully!</p>
  </veui-alert-box>

  <veui-alert-box
    status="success"
    :open.sync="open2"
    @ok="ok"
  >
    <template #title>
      Success
      <veui-icon name="info-circle"/>
    </template>
    <p>Saved successfully!</p>
  </veui-alert-box>
</article>
</template>

<script>
import { AlertBox, Button, Icon, toast } from 'veui'
import 'veui-theme-dls-icons/info-circle'

export default {
  components: {
    'veui-alert-box': AlertBox,
    'veui-button': Button,
    'veui-icon': Icon
  },
  data () {
    return {
      open1: false,
      open2: false
    }
  },
  methods: {
    ok () {
      toast.info('Confirmed')
    }
  }
}
</script>

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

API

Props

Name Type Default Description

open

boolean

false

.sync

Whether to display the alert box.

status

string

'success'

The contextual status of the alert box.

Value	Description
`info`	Informational status.
`success`	Success status.
`error`	Error status.

type string 'success' Deprecated. Use status instead.

title string - The title of the alert box.

loading boolean false Whether the alert box is in the loading state. When in the loading state, the OK button will also enter the loading state and cannot be clicked.

disabled boolean false Whether the alert box is disabled. When disabled, the OK button will also be disabled and cannot be clicked.

ok-label string - The text content of the "OK" button.

before-close function(string): boolean=|Promise<boolean> - Executes after the operation that triggers the close, see before-close prop of the Dialog component for reference.

overlay-class string | Array | Object - See the overlay-class prop of the Overlay component for reference.

overlay-style string | Array | Object - See the overlay-style prop of the Overlay component for reference.

Slots

Name	Description
`default`	Content area.
`title`	Title area. If both the `title` prop and the `title` slot are specified, the latter takes precedence.
`foot`	Footer area. By default, an “OK” button is displayed.

Events

Name	Description
`ok`	Triggered when the “OK” button is clicked.
`afteropen`	Triggered after the alert box is opened. The alert box content is only rendered after opening, so if there is logic that depends on content rendering, execute it after this event is triggered.
`afterclose`	Triggered after the alert box is closed. If the theme provides an exit animation, it will be triggered after the exit animation is completed.

Icons

Name	Description
`info`	Normal information.
`success`	Success state.
`error`	Error state.

Edit this page on GitHubEdit