VEUI

VEUI on GitHub
Play!中文

ConfirmBox

Examples

Custom title and content area.

Edit this demo on GitHubEdit
<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

NameTypeDefaultDescription
openbooleanfalse

.sync

Whether to show the confirm box.

titlestring-Title.
loadingbooleanfalseWhether the dialog is in loading state. When in loading state, the OK button will also be in loading state and cannot be clicked.
disabledbooleanfalseWhether the dialog is disabled. When disabled, the OK button will also be disabled and cannot be clicked.
ok-labelstring-The text content of the "OK" button.
cancel-labelstring-The text content of the "Cancel" button.
before-closefunction(string): boolean=|Promise<boolean>-Executed after the operation that triggers the close. Refer to the before-close prop of the Dialog component.
overlay-classstring | Array | Object-Refer to the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object-Refer to the overlay-style prop of the Overlay component.

Slots

NameDescription
defaultContent area.
titleTitle area. If both the title prop and the title slot are specified, the latter will take precedence.
footFooter area. The "OK" and "Cancel" buttons will be displayed by default.

Events

NameDescription
okTriggered when the "OK" button is clicked.
cancelTriggered when the "Cancel" button is clicked.
afteropenTriggered 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.
aftercloseTriggered 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
© Baidu, Inc. 2024