ConfirmBox

Examples

Custom title and content area.

<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 to show the confirm box.
`title`	`string`	-	Title.
`loading`	`boolean`	`false`	Whether the dialog is in loading state. When in loading state, the OK button will also be in loading state and cannot be clicked.
`disabled`	`boolean`	`false`	Whether the dialog is disabled. When disabled, the OK button will also be disabled and cannot be clicked.
`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 after the operation that triggers the close. Refer to the `before-close` prop of the `Dialog` component.
`overlay-class`	`string \| Array \| Object`	-	Refer to the `overlay-class` prop of the `Overlay` component.
`overlay-style`	`string \| Array \| Object`	-	Refer to the `overlay-style` prop of the `Overlay` component.

Slots

Name	Description
`default`	Content area.
`title`	Title area. If both the `title` prop and the `title` slot are specified, the latter will take precedence.
`foot`	Footer area. The "OK" and "Cancel" buttons will be displayed 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 dialog is opened. The dialog content will not be rendered until after the event is triggered. So if there is logic that depends on content rendering, execute it after this event is triggered.
`afterclose`	Triggered after the dialog is closed. If the style theme provides an exit animation, it will be triggered after the animation is complete.

Edit this page on GitHubEdit