Skip to content

VOverlay API

组件页面

属性

名称类型默认值
absolute
Applies position: absolute to the content element.
activator
Explicitly sets the overlay’s activator.
activator-props
Apply custom properties to the activator.
attach
Specifies which DOM element the overlay content should teleport to. Can be a direct element reference, querySelector string, or true to disable teleporting. Uses body by default.
close-delay
组件关闭前等待的毫秒数。仅应用于悬停和焦点事件。
close-on-back
Closes the overlay content when the browser’s back button is pressed or $router.back() is called, cancelling the original navigation. persistent overlays will cancel navigation and animate as if they were clicked outside instead of closing.
close-on-content-click
Closes component when you click on its content.
contained
Limits the size of the component and scrim to its offset parent. Implies absolute and attach. (Note: The parent element must have position: relative.).
content-class
将自定义的class应用于被分离的此元素。由于此元素的内容将被附加到v-app组件开头(除非你设置了attach属性),并且class属性不会将css类直接传递给组件,所以这个实行非常有用。
content-props
Apply custom properties to the content.
disabled
移除组件的单击或 target 功能。
eager
Forces the component’s content to render when it mounts. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
height
设定组件的高度。
location
Specifies the anchor point for positioning the component, using directional cues to align it either horizontally, vertically, or both…
location-strategy
A function used to specifies how the component should position relative to its activator.
max-height
设定组件的最大高度。
max-width
设定组件的最大宽度。
min-height
设定组件的最小高度。
min-width
设定组件的最小宽度。
model-value
组件 v-mode 的值。如果组件支持多属性,默认为空数组。
no-click-animation
Disables the bounce effect when clicking outside of the content element when using the persistent prop.
offset
A single value that offsets content away from the target based upon what side it is on.
opacity
设置遮罩层的透明度。
open-delay
组件打开前等待的毫秒数。仅应用于悬停和焦点事件。
open-on-click
Activate the component when the activator is clicked.
open-on-focus
Activate the component when the activator is focused.
open-on-hover
Activate the component when the activator is hovered.
origin
设置元素上的动画原点。您可以在 MDN 文档上浏览更多 for transition origin
persistent
Clicking outside of the element or pressing esc key will not deactivate it.
scrim
Accepts true/false to enable background, and string to define color.
scroll-strategy
Strategy used when the component is activate and user scrolls.
target
For locationStrategy=“connected”, specify an element or array of x,y coordinates that the overlay should position itself relative to. This will be the activator element by default.
theme
Specify a theme for this component and all of its children.
transition
Sets the component transition. Can be one of the built in or custom transition.
width
设定组件的宽度。
z-index
The z-index used for the component.

事件

名称类型
afterEnter
MISSING DESCRIPTION (edit in github )
afterLeave
Event that fires after the overlay has finished transitioning out.
click:outside
Event that fires when clicking outside an active overlay.
update:modelValue
当组件的 model-value 更改时引发的事件。

插槽

activator
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation.
default
默认Vue 插槽。

可用属性

activatorEl
MISSING DESCRIPTION (edit in github )
animateClick
MISSING DESCRIPTION (edit in github )
contentEl
MISSING DESCRIPTION (edit in github )
globalTop
MISSING DESCRIPTION (edit in github )
localTop
MISSING DESCRIPTION (edit in github )
scrimEl
MISSING DESCRIPTION (edit in github )
target
MISSING DESCRIPTION (edit in github )
updateLocation
MISSING DESCRIPTION (edit in github )

SASS 变量

名称默认值
$overlay-opacity
$overlay-scrim-background