Events

Example:

<template>
  <div>
    <vue-final-modal
      v-model="showModal"
      @click-outside="clickOutside"
      @before-open="beforeOpen"
      @opened="opened"
      @before-close="beforeClose"
      @closed="closed"
      @cancel="showModal = false"
    >
      <template v-slot:title>Events Example!</template>
    </vue-final-modal>
    <v-button highlight @click="showModal = true">Open modal</v-button>
  </div>
</template>

<script>
export default {
  data: () => ({
    showModal: false
  }),
  methods: {
    clickOutside() {
      alert('click-outside')
    },
    beforeOpen() {
      alert('beforeOpen')
    },
    opened() {
      alert('opened')
    },
    beforeClose() {
      alert('beforeClose')
    },
    closed() {
      alert('closed')
    }
  }
}
</script>

@click-outside

Emits while modal container on click.

@before-open

Emits while modal is still invisible, but before transition starting.

@opened

Emits after modal became visible and transition ended.

@before-close

Emits before modal is going to be closed.

@closed

Emits right before modal is destroyed.

@drag:start

Emits on drag start.

@drag:move

Emits on drag move.

@drag:end

Emits on drag end.

@resize:start

Emits on resize start.

@resize:move

Emits on resize move.

@resize:end

Emits on resize end.