Popover - Vant 4

Popover

Intro

Used to display some content on top of another.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

import { createApp } from'vue'; import { Popover } from'vant'; const app = createApp(); app.use(Popover);

Usage

Basic Usage

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const showPopover = ref(false); const actions = [ { text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }, ]; constonSelect = (action) => showToast(action.text); return { actions, onSelect, showPopover, }; }, };

Dark theme

Using the theme prop to change the style of Popover.

import { ref } from'vue'; exportdefault { setup() { const showPopover = ref(false); const actions = [ { text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }, ]; return { actions, showPopover, }; }, };

Horizontal

After setting the actions-direction prop to horizontal, the actions will be arranged horizontally.

import { ref } from'vue'; exportdefault { setup() { const showPopover = ref(false); const actions = [ { text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }, ]; return { actions, showPopover, }; }, };

Placement

placement supports the following values:

top # Top middle top-start # Top left top-end # Top right left # Left middle left-start # Left top left-end # Left bottom right # Right middle right-start # Right top right-end # Right bottom bottom # Bottom middle bottom-start # Bottom left bottom-end # Bottom right

Show Icon

import { ref } from'vue'; exportdefault { setup() { const showPopover = ref(false); const actions = [ { text: 'Option 1', icon: 'add-o' }, { text: 'Option 2', icon: 'music-o' }, { text: 'Option 3', icon: 'more-o' }, ]; return { actions, showPopover, }; }, };

Disable Action

Using the disabled option to disable an action.

import { ref } from'vue'; exportdefault { setup() { const showPopover = ref(false); const actions = [ { text: 'Option 1', disabled: true }, { text: 'Option 2', disabled: true }, { text: 'Option 3' }, ]; return { actions, showPopover, }; }, };

Custom Content

import { ref } from'vue'; exportdefault { setup() { const showPopover = ref(false); return { showPopover }; }, };

Uncontrolled

You can use Popover as a controlled or uncontrolled component:

• When binding v-model:show, Popover is a controlled component, and the display of the component is completely controlled by the value of v-model:show.
• When v-model:show is not used, Popover is an uncontrolled component. You can pass in a default value through the show prop, and the display is controlled by the component itself.

import { ref } from'vue'; import { showToast } from'vant'; exportdefault { setup() { const actions = [ { text: 'Option 1' }, { text: 'Option 2' }, { text: 'Option 3' }, ]; constonSelect = (action) => showToast(action.text); return { actions, onSelect, }; }, };

API

Props

Attribute	Description	Type	Default
v-model:show	Whether to show Popover	boolean	false
actions	Actions	PopoverAction[]	[]
actions-direction v4.4.1	Direction of actions, can be set to horizontal	PopoverActionsDirection	vertical
placement	Placement	PopoverPlacement	bottom
theme	Theme, can be set to dark	PopoverTheme	light
trigger	Trigger mode, can be set to manual	PopoverTrigger	click
duration	Transition duration, unit second	*number	string*
offset	Distance to reference	[number, number]	[0, 8]
overlay	Whether to show overlay	boolean	false
overlay-class	Custom overlay class	*string	Array
overlay-style	Custom overlay style	object	-
show-arrow	Whether to show arrow	boolean	true
close-on-click-action	Whether to close when clicking action	boolean	true
close-on-click-outside	Whether to close when clicking outside	boolean	true
close-on-click-overlay	Whether to close when clicking overlay	boolean	true
teleport	Specifies a target element where Popover will be mounted	*string	Element*
icon-prefix	Icon className prefix	string	van-icon

Data Structure of PopoverAction

Key	Description	Type
text	Action Text	string
icon	Icon	string
color	Action Color	string
disabled	Whether to be disabled	boolean
className	className of the option	*string

Events

Event	Description	Arguments
select	Emitted when an action is clicked	action: PopoverAction, index: number
open	Emitted when opening Popover	-
close	Emitted when closing Popover	-
opened	Emitted when Popover is opened	-
closed	Emitted when Popover is closed	-
click-overlay	Emitted when overlay is clicked	event: MouseEvent

Slots

Name	Description	SlotProps
default	Custom content	-
reference	Reference Element	-
action	Custom the content of option	{ action: PopoverAction, index: number }

Types

The component exports the following type definitions:

importtype { PopoverProps, PopoverTheme, PopoverAction, PopoverActionsDirection, PopoverTrigger, PopoverPlacement, } from'vant';

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

Name	Default Value	Description
--van-popover-arrow-size	6px	-
--van-popover-radius	var(--van-radius-lg)	-
--van-popover-action-width	128px	-
--van-popover-action-height	44px	-
--van-popover-action-font-size	var(--van-font-size-md)	-
--van-popover-action-line-height	var(--van-line-height-md)	-
--van-popover-action-icon-size	20px	-
--van-popover-horizontal-action-height	34px	-
--van-popover-horizontal-action-icon-size	16px	-
--van-popover-light-text-color	var(--van-text-color)	-
--van-popover-light-background	var(--van-background-2)	-
--van-popover-light-action-disabled-text-color	var(--van-text-color-3)	-
--van-popover-dark-text-color	var(--van-white)	-
--van-popover-dark-background	#4a4a4a	-

| --van-popover-dark-action-disabled-text-color | var(--van-text-color-2) | - |