Overview the default value of properties

<template>
  <vue-final-modal
    :name="null"
    :value="false"
    :ssr="true"
    :classes="false"
    overlay-class=""
    content-class=""
    styles=""
    overlay-style=""
    content-style=""
    :lock-scroll="true"
    :hide-overlay="false"
    :click-to-close="true"
    :esc-to-close="false"
    :prevent-click="false"
    :attach="false"
    transition="vfm"
    overlay-transition="vfm"
    :z-index-auto="true"
    :z-index-base="1000"
    :z-index="false"
    :focus-retain="true"
    :focus-trap="false"
    :fit-parent="true"
    :drag="false"
    drag-selector=""
    :keep-changed-style="false"
    :resize="false"
    :resize-directions="['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']"
    :min-width="0"
    :min-height="0"
    :max-width="Infinity"
    :max-height="Infinity"
  >
    ...modal content
  </vue-final-modal>
</template>

name

• Type: String
• Default: null

Modal name for the API $vfm.show(name), $vfm.hide(name), etc.

ssr

• Type: Boolean
• Default: true

Enabled Server-Side Rendering.

classes

• Type: [String, Object, Array]
• Default: ''

Custom class names for the modal container.

content-class

• Type: [String, Object, Array]
• Default: ''

Custom class names for the modal content.

overlay-class

• Type: [String, Object, Array]
• Default: ''

Custom class names for the modal overlay.

styles

• Type: [Object, Array]
• Default: {}

Style that will be applied to the modal container.

content-style

• Type: [Object, Array]
• Default: {}

Style that will be applied to the modal content.

overlay-style

• Type: [Object, Array]
• Default: {}

Style that will be applied to the modal overlay.

transition

• Type: [String, Object]
• Default: 'vfm'

CSS transition applied to the modal container.

.vfm-enter-active,
.vfm-leave-active {
  transition: opacity 0.2s;
}
.vfm-enter,
.vfm-leave-to {
  opacity: 0;
}

<template>
  <vue-final-modal
    :transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-from-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-from-class': 'translate-y-0'
    }"
  >
    ...modal content
  </vue-final-modal>
</template>

overlay-transition

• Type: [String, Object]
• Default: 'vfm'

CSS transition applied to the modal overlay.

.vfm-enter-active,
.vfm-leave-active {
  transition: opacity 0.2s;
}
.vfm-enter,
.vfm-leave-to {
  opacity: 0;
}

<template>
  <vue-final-modal
    :transition="{
      'enter-active-class': 'transition duration-200 ease-in-out transform',
      'enter-from-class': 'translate-y-full',
      'enter-to-class': 'translate-y-0',
      'leave-active-class': 'transition duration-200 ease-in-out transform',
      'leave-to-class': 'translate-y-full',
      'leave-from-class': 'translate-y-0'
    }"
  >
    ...modal content
  </vue-final-modal>
</template>

keep-overlay

• Type: Boolean
• Default: false

If keep-overlay is false, the overlay will be removed when open multiple modals. If keep-overlay is true, the overlay will not be removed when open multiple modals.

lock-scroll

• Type: Boolean
• Default: true

Disabled the scrolling of body while the modal is displayed.

hide-overlay

• Type: Boolean
• Default: false

Hiding the display of the overlay.

click-to-close

• Type: Boolean
• Default: true

Enabled closing the modal by clicking overlay of the modal.

esc-to-close

• Type: Boolean
• Default: false

Press esc to close the modal.

prevent-click

• Type: Boolean
• Default: false

The click event will not be blocked by overlay.
Set the root element of vue-final-modal style to pointer-events: none;.

attach

• Type: Any
• Default: false

Specifies which DOM element that this component should detach to.

1. Set false will disabled this feature.
2. String can be any valid querySelector, e.g. 'body', '#app'.
3. Object can be any valid Node, e.g. this.$refs.container.

z-index-auto

• Type: Boolean
• Default: true

Auto binding z-index base on the prop z-index-base and adding 2 by each stackable modal. If zIndex is set, z-index-auto, z-index-base will be ignored.

z-index-base

• Type: [String, Number]
• Default: 1000

Calculate z-index automatically with z-index-base. If zIndex is set, z-index-auto, z-index-base will be ignored.

z-index

• Type: [String, Number]
• Default: false

Set specific z-index to root of the modal element. If zIndex is set, z-index-auto, z-index-base will be ignored.

focus-retain

• Type: Boolean
• Default: true

Focus the modal vfm__container after the modal enter.

focus-trap

• Type: Boolean
• Default: false

Enables focus trap meaning that only inputs/buttons that are withing the modal window can be focused by pressing Tab (plugin uses very naive implementation of the focus trap).

drag

• Type: Boolean
• Default: false

Enables draggable modal.

fit-parent

• Type: Boolean
• Default: false

Limit the x-axis, y-axis, width and height of the .vfm__content to not exceed the .vfm__container.

drag-selector

• Type: String

• Default: ''

• Example:

  <vue-final-modal drag-selector=".modal-drag">
    <div class="modal-title modal-drag">...</div>
    <div class="modal-content">...</div>
    <div class="modal-action">...</div>
  </vue-fianl-modal>
  

Only the element that was selected by querySelectorAll(string) can trigger drag modal.

keep-changed-style

• Type: Boolean
• Default: false

Keep the style that was changed by drag and resize after modal closed.

resize

• Type: Boolean
• Default: false

Enables resizable modal.

resize-directions

• Type: Array
• Default: []
• Valid value: ['t', 'tr', 'r', 'br', 'b', 'bl', 'l', 'tl']

Active directions for resizable modal.

min-width

• Type: Number
• Default: 0

Limit min-width for resizable modal.

min-height

• Type: Number
• Default: 0

Limit min-height for resizable modal.

max-width

• Type: Number
• Default: Infinity

Limit max-width for resizable modal.

max-height

• Type: Number
• Default: Infinity

Limit max-height for resizable modal.