<VueFinalModal>
Template structure
This is the simplify template of the <VueFinalModal>
.
It will be helpful for understanding the naming of props.
<template> <div class="vfm"> <transition v-bind="overlayTransition"> <div class=vfm__overlay></div> </transition> <transition v-bind="contentTransition"> <div class=vfm__content> <slot /> <div class="vfm-swipe-banner-container"></div> </div> </transition> </div></template>
Props
teleportTo
- Description:
- Set
null | false
to disable teleport. - Checkout the Nuxt 3 teleport for the reason why the default value have to be
'body'
.
- Set
- Type:
- JS:
[String, null, Boolean, Object]
- TS:
PropType<string | RendererElement | null | false>
- JS:
- Default:
'body'
modalId (optional)
modalId
should be an uniq value for the operation of a modal via useVfm().
- Type:
- JS:
[String, Number, Symbol]
- TS:
PropType<ModalId>
export type ModalId = number | string | symbolimport { ModalId } from 'vue-final-modal'
- JS:
- Default:
undefined
modelValue (optional)
Display the modal or not.
- Type:
- JS:
Boolean
- TS:
PropType<boolean>
- JS:
- Default:
undefined
displayDirective
Render the modal content via 'if'
or 'show'
directive.
if you need to keep the status of the modal, you can use 'show'
directive. for example if you have a draggable and resizable modal and you need to keep the size and position of the modal while re-open it (see example).
- Type:
- JS:
'if' | 'show'
- TS:
PropType<'if' | 'show'>
- JS:
- Default:
'if'
hideOverlay
Hide the overlay or not.
- Type:
- JS:
Boolean
- TS:
PropType<boolean>
- JS:
- Default:
undefined
overlayTransition
This prop allow you to setup the transition for .vfm__overlay
element. You can pass a transition name or use the built-in transition name provide by vue-final-modal including 'vfm-fade'
, 'vfm-slide-down'
, 'vfm-slide-up'
, 'vfm-slide-right'
, 'vfm-slide-left'
. You can also pass the TransitionProps to customize your own transition.
- Type:
- JS:
[String, Object]
- TS:
PropType<string | 'vfm-fade' | 'vfm-slide-down' | 'vfm-slide-up' | 'vfm-slide-right' | 'vfm-slide-left' | TransitionProps>
- JS:
- Default:
undefined
contentTransition
This prop allow you to setup the transition for .vfm__content
element. You can pass a transition name or use the built-in transition name provide by vue-final-modal including 'vfm-fade'
, 'vfm-slide-down'
, 'vfm-slide-up'
, 'vfm-slide-right'
, 'vfm-slide-left'
. You can also pass the TransitionProps to customize your own transition.
- Type:
- JS:
[String, Object]
- TS:
PropType<string | 'vfm-fade' | 'vfm-slide-down' | 'vfm-slide-up' | 'vfm-slide-right' | 'vfm-slide-left' | TransitionProps>
- JS:
- Default:
undefined
overlayClass
Bind class to .vfm__overlay
element.
- Type:
- JS:
[Object, Array, String]
- TS:
[Object, Array, String] as unknown as PropType<any>
- JS:
- Default:
undefined
contentClass
Bind class to .vfm__content
element.
- Type:
- JS:
[Object, Array, String]
- TS:
[Object, Array, String] as unknown as PropType<any>
- JS:
- Default:
undefined
overlayStyle
Bind style to .vfm__overlay
element.
- Type:
- JS:
[String, Object, Array]
- TS:
PropType<StyleValue>
export type StyleValue = string | CSSProperties | (string | CSSProperties)[]import { StyleValue } from 'vue-final-modal'
- JS:
- Default:
undefined
contentStyle
Bind style to .vfm__content
element.
- Type:
- JS:
[String, Object, Array]
- TS:
PropType<StyleValue>
export type StyleValue = string | CSSProperties | (string | CSSProperties)[]import { StyleValue } from 'vue-final-modal'
- JS:
- Default:
undefined
clickToClose
Can be closed by clicking the .vfm
element.
- Type:
- JS:
Boolean
- TS:
PropType<boolean>
- JS:
- Default:
true
escToClose
Can be closed by keypress esc
.
- Type:
- JS:
Boolean
- TS:
PropType<boolean>
- JS:
- Default:
true
background
Is it allow to interact with background of the modal.
- Type:
- JS:
'interactive' | 'non-interactive'
- TS:
PropType<'interactive' | 'non-interactive'>
- JS:
- Default:
'non-interactive'
focusTrap
- Description:
- Set
false
to disable the focusTrap. - For more information on what
options
can be passed, see createOptions in the focus-trap documentation.
- Set
- Type:
- JS:
[Boolean, Object]
- TS:
PropType<false | Options>
- JS:
- Default:
() => ({ allowOutsideClick: true })
lockScroll
Lock body scroll or not when the modal is opened.
- Type:
- JS:
Boolean
- TS:
PropType<boolean>
- JS:
- Default:
true
zIndexFn
Define how to increase the zIndex when there are nested modals.
- Type:
- JS:
Function
- TS:
PropType<(context: { index: number }) => number | undefined>
- JS:
- Default:
({ index }: { index: number }) => 1000 + 2 * index
index
is the index order of the opened modals
swipeToClose
The direction of swiping to close the modal
- Type:
- JS:
'none' | 'up' | 'right' | 'down' | 'left'
- TS:
PropType<'none' | 'up' | 'right' | 'down' | 'left'>
- JS:
- Default:
'none'
threshold
Threshold for swipe to close
- Type:
- JS:
Number
- TS:
PropType<number>
- JS:
- Default:
0
showSwipeBanner
If set :showSwipeBanner="true"
, only allow clicking swipe-banner
slot to swipe to close
- Type:
- JS:
Boolean
- TS:
PropType<boolean>
- JS:
- Default:
undefined
preventNavigationGestures
When set :preventNavigationGestures="true"
, there will be two invisible bars for prevent navigation gestures including swiping back/forward on mobile webkit. For example: Safari mobile.
- Type:
- JS:
Boolean
- TS:
PropType<boolean>
- JS:
- Default:
undefined
Events
(e: 'beforeOpen'): void
: Emits while modal is still invisible, but before transition starting.(e: 'opened'): void
: Emits after modal became visible and transition ended.(e: 'beforeClose'): void
: Emits before modal is going to be closed.(e: 'closed'): void
: Emits right before modal is destroyed.(e: 'clickOutside'): void
: Emits while.vfm
element on click.
Slots
- The
default
slot can be used to render the modal content. - The
swipe-banner
slot can be used to define the area that can be swipe to close