Events

Example:

Show code
<template>
  <vue-final-modal
    @click-outside="clickOutside"
    @before-open="beforeOpen"
    @opened="opened"
    @before-close="beforeClose"
    @closed="closed"
  >
    ...modal content
  </vue-final-modal>
</template>

@click-outside

  • Emits while modal container on click.

If prop clickToClose is false, the event will still be emitted.

@before-open

  • Emits while modal is still invisible, but before transition starting.
Further opening of the modal can be blocked from this event listener by calling event.stop() .

@opened

  • Emits after modal became visible and transition ended.

@before-close

  • Emits before modal is going to be closed.
Further closing of the modal can be blocked from this event listener by calling event.stop() .

@closed

  • Emits right before modal is destroyed.
Further after the modal was closed, you can avoid the modal to reset the params to empty object by calling event.stop() .
Edit this page on GitHub Updated at Fri, May 7, 2021