vant/src/popup

Popup

Install

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>

export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
};

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.

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

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

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

export default {
  beforeCreate() {
    this.myContainer = document.querySelector('.my-container');
  },
};

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	-
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
transition	Transition, equivalent to name prop of transtion	string	-
transition-appear v2.10.14	Whether to apply transition on initial render	boolean	false
teleport	Return the mount node for Popup	string | Element	-
safe-area-inset-bottom v2.2.1	Whether to enable bottom safe area adaptation	boolean	false

Events

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

Less Variables

How to use: Custom Theme.

Name	Default Value	Description
@popup-background-color	@white	-
@popup-transition	transform @animation-duration-base	-
@popup-round-border-radius	16px	-
@popup-close-icon-size	22px	-
@popup-close-icon-color	@gray-5	-
@popup-close-icon-active-color	@gray-6	-
@popup-close-icon-margin	16px	-
@popup-close-icon-z-index	1	-