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 demo 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 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 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.
`afteropen`	Triggered after the box overlay is opened. The box content won't be rendered until after the overlay is opened, so if there is logic that depends on content rendering, please execute it after this event is triggered.
`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