vant/src/popup

Popup

Intro

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

Install

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

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

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

Usage

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" />

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

export default {
  setup() {
    const myContainer = document.querySelector('.my-container');
    return {
      myContainer,
    };
  },
};

Tips: The teleport prop cannot be used on the root node

API

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-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

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-white)	-
--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-active-color	var(--van-gray-6)	-
--van-popup-close-icon-margin	16px	-
--van-popup-close-icon-z-index	1	-