Intro

Used to display pop-up windows, information prompts, etc., and supports multiple pop-up layers to display.

Install

import { createApp } from 'vue';
import { Popup } from 'vant';

const app = createApp();
app.use(Popup);

Basic Usage

<van-cell is-link @click="showPopup">Show Popup</van-cell>
<van-popup v-model:show="show">Content</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
};

Position

Use position prop to set popup display position.

<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />

Close Icon

<van-popup
  v-model:show="show"
  closeable
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- Custom Icon -->
<van-popup
  v-model:show="show"
  closeable
  close-icon="close"
  position="bottom"
  :style="{ height: '30%' }"
/>
<!-- Icon Position -->
<van-popup
  v-model:show="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '30%' }"
/>

Round Corner

<van-popup
  v-model:show="show"
  round
  position="bottom"
  :style="{ height: '30%' }"
/>

Get Container

Use teleport prop to specify mount location.

<!-- teleport to body -->
<van-popup v-model:show="show" teleport="body" />

<!-- teleport to #app -->
<van-popup v-model:show="show" teleport="#app" />

Props

Attribute	Description	Type	Default
v-model:show	Whether to show popup	boolean	`false`
overlay	Whether to show overlay	boolean	`true`
position	Can be set to `top` `bottom` `right` `left`	string	`center`
overlay-class	Custom overlay class	string \| Array \| object	-
overlay-style	Custom overlay style	object	-
duration	Transition duration, unit second	number \| string	`0.3`
round	Whether to show round corner	boolean	`false`
lock-scroll	Whether to lock background scroll	boolean	`true`
lazy-render	Whether to lazy render util appeared	boolean	`true`
close-on-popstate	Whether to close when popstate	boolean	`false`
close-on-click-overlay	Whether to close when overlay is clicked	boolean	`true`
closeable	Whether to show close icon	boolean	`false`
close-icon	Close icon name	string	`cross`
close-icon-position	Close Icon Position, can be set to `top-left` `bottom-left` `bottom-right`	string	`top-right`
before-close `v3.1.4`	Callback function before close	(action: string) => boolean \| Promise<boolean>	-
icon-prefix `v3.0.18`	Icon className prefix	string	`van-icon`
transition	Transition, equivalent to `name` prop of transition	string	-
transition-appear	Whether to apply transition on initial render	boolean	`false`
teleport	Specifies a target element where Popup will be mounted	string \| Element	-
safe-area-inset-top	Whether to enable top safe area adaptation	boolean	`false`
safe-area-inset-bottom	Whether to enable bottom safe area adaptation	boolean	`false`

Events

Event	Description	Arguments
click	Emitted when Popup is clicked	event: MouseEvent
click-overlay	Emitted when overlay is clicked	event: MouseEvent
click-close-icon	Emitted when close icon is clicked	event: MouseEvent
open	Emitted when opening Popup	-
close	Emitted when closing Popup	-
opened	Emitted when Popup is opened	-
closed	Emitted when Popup is closed	-

Slots

Name	Description
default	Content of Popup
overlay-content `v3.0.18`	Content of Popup overlay

Types

The component exports the following type definitions:

import type {
  PopupProps,
  PopupPosition,
  PopupInstance,
  PopupCloseIconPosition,
} from 'vant';

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-popup-background-color	var(--van-background-color-light)	-
--van-popup-transition	transform var(--van-animation-duration-base)	-
--van-popup-round-border-radius	16px	-
--van-popup-close-icon-size	22px	-
--van-popup-close-icon-color	var(--van-gray-5)	-
--van-popup-close-icon-margin	16px	-
--van-popup-close-icon-z-index	1	-

Popup