AlertBox

Demos

Types

AlertBox component has 3 contextual types, which are success, info, anderror. Types are specified with the [type`](#props-type) prop.

Edit this page on GitHubEdit

<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

You can customize the title of alert box with the title prop.

Edit this page 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 the alert box is displayed.

type

string=

'success'

The contextual type of the alert box.

Value	Description
`info`	Information alert box.
`success`	Success alert box.
`error`	Error alert box.

title string= - The title of the alert box.

loading boolean= false Wehter the confirm box is in loading state. When loading, the OK button will enter loading state as well and become unclickable.

disabled boolean= false Wehter the confirm box is disabled. When disabled, the OK button will be disabled as well and become unclickable.

ok-label string= - The text content of the “OK” button.

before-close function(string): boolean=|Promise<boolean=> - Executed when user interaction is about to trigger closing the alert box. See the before-close prop of the Dialog component.

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

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

Slots

Name	Description
`default`	The content of the alert box.
`title`	The title of the alert box. Will ignore the `title` prop when specified.
`foot`	The foot area of the alert box. Displays an “OK” button by default.

Events

Name	Description
`ok`	Triggered when the “OK” button is clicked.
`afterclose`	Triggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes.

Icons

Name	Description
`info`	Information alert.
`success`	Success alert.
`error`	Error alert.

Edit this page on GitHubEdit