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, toast } from 'veui'

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

Name	Type	Default	Description
`open`	`boolean`	`false`	`.sync` Whether the confirm box is displayed.
`title`	`string=`	-	The title of the confirm 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.
`cancel-label`	`string=`	-	The text content of the “Cancel” button.
`before-close`	`function(string): boolean=\|Promise<boolean=>`	-	Executed when user interaction is about to trigger closing the confirm 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 confirm box.
`title`	The title of the confirm box. Will ignore the `title` prop when specified.
`foot`	The foot area of the confirm box. Displays an “OK” and a “Cancel” button by default.

Events

Name	Description
`ok`	Triggered when the “OK” button is clicked.
`cancel`	Triggered when the “Cancel” 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.

Edit this page on GitHubEdit