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.
`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