ConfirmBox

Demos

The title and content are both customizable.

<template>
<article>
  <veui-button @click="open = true">
    Remove
  </veui-button>
  <veui-confirm-box
    title="System Notification"
    :open.sync="open"
    @ok="ok"
    @cancel="cancel"
  >
    <p>Are you sure to remove the item?</p>
  </veui-confirm-box>
</article>
</template>

<script>
import { ConfirmBox, Button } from 'veui'
import toast from 'veui/managers/toast'

export default {
  components: {
    'veui-confirm-box': ConfirmBox,
    'veui-button': Button
  },
  data () {
    return {
      open: false
    }
  },
  methods: {
    ok () {
      this.open = false
      toast.info('Confirmed')
    },
    cancel () {
      toast.info('Canceled')
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
openbooleanfalse

.sync

Whether the confirm box is displayed.

titlestring-The title of the confirm box.
overlay-classstring|Array|Object-See the overlay-class prop of Overlay.

Slots

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

Events

NameDescription
okTriggered when the “OK” button is clicked.
cancelTriggered when the “Cancel” button is clicked.
aftercloseTriggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes.