AlertBox

Examples

Types

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

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

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

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

  <veui-alert-box
    type="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>
.veui-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 @click="open1 = true">
    title prop
  </veui-button>
  <veui-button @click="open2 = true">
    title slot
  </veui-button>

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

  <veui-alert-box
    type="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>
.veui-button {
  margin-right: 10px;
}

.icon {
  vertical-align: -2px;
}
</style>

API

Props

Name Type Default Description

open

boolean

false

.sync

Whether to display the alert box.

type

string

'success'

The contextual type of the alert box.

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

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