VEUI

VEUI on GitHub
中文

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

NameTypeDefaultDescription
openbooleanfalse

.sync

Whether the alert box is displayed.

typestring='success'

The contextual type of the alert box.

ValueDescription
infoInformation alert box.
successSuccess alert box.
errorError alert box.
titlestring=-The title of the alert box.
loadingboolean=falseWehter the confirm box is in loading state. When loading, the OK button will enter loading state as well and become unclickable.
disabledboolean=falseWehter the confirm box is disabled. When disabled, the OK button will be disabled as well and become unclickable.
ok-labelstring=-The text content of the “OK” button.
before-closefunction(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-classstring | Array | Object=-See the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object=-See the overlay-style prop of the Overlay component.

Slots

NameDescription
defaultThe content of the alert box.
titleThe title of the alert box. Will ignore the title prop when specified.
footThe foot area of the alert box. Displays an “OK” button by default.

Events

NameDescription
okTriggered when the “OK” button is clicked.
afteropenTriggered 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.
aftercloseTriggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes.

Icons

NameDescription
infoInformation alert.
successSuccess alert.
errorError alert.
Edit this page on GitHubEdit
© Baidu, Inc. 2023