vant/docs/examples-docs/en-US/popup.md

Popup

Install

import { Popup } from 'vant';

Vue.component(Popup.name, Popup);

Usage

Basic Usage

Popup is located in the middle of the screen by default

:::demo Basic Usage

<van-button @click="show1 = true">Show Popup</van-button>
<van-popup v-model="show1">Content</van-popup>

export default {
  data() {
    return {
      show1: false
    }
  }
};

:::

Different Position

Use position prop to set popup display position

:::demo Different Position

<van-button @click="show2 = true;">From Bottom</van-button>
<van-popup v-model="show2" position="bottom">
  <van-button @click="showDialog">Show Dialog</van-button>
</van-popup>

<van-button @click="show3 = true">From Top</van-button>
<van-popup v-model="show3" position="top" :overlay="false">Content</van-popup>

<van-button @click="show4 = true">From Right</van-button>
<van-popup v-model="show4" position="right" :overlay="false">
  <van-button @click="show4 = false">Close</van-button>
</van-popup>

export default {
  data() {
    return {
      show1: false,
      show2: false,
      show3: false,
      show4: false
    }
  },

  watch: {
    show2(val) {
      if (val) {
        setTimeout(() => {
          this.show2 = false;
        }, 2000);
      }
    }
  }
};

:::

API

Attribute	Description	Type	Default	Accepted Values
v-model	Whether to show popup	Boolean	false	-
overlay	Whether to show overlay	Boolean	true	-
lockOnScroll	Lock body scroll	Boolean	false	-
position	Position	String	-	top bottom right left
closeOnClickOverlay	Close popup when click overlay	Boolean	true	-
transition	Transition	String	popup-slide	-
preventScroll	Prevent background scroll	Boolean	false	-