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

Popup

Install

import { Popup } from 'vant';

Vue.component(Popup.name, Popup);

Usage

Basic Usage

popup默认情况下是从中间弹出。

:::demo Basic Usage

<van-button @click="popupShow1 = true">从中间弹出popup</van-button>
<van-popup v-model="popupShow1" class="van-popup-1" :lock-on-scroll="true">
  从中间弹出popup
</van-popup>

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

:::

从不同位置弹出层

可以设置position属性，popup即能从不同位置弹出，position的可选值有top，bottom，right，left。

:::demo 从不同位置弹出层

<van-button @click="popupShow2 = true;">从下方弹出popup</van-button>
<van-popup v-model="popupShow2" position="bottom" class="van-popup-2">
  <van-button @click="showDialog">弹出dialog</van-button>
</van-popup>

<van-button @click="popupShow3 = true">从上方弹出popup</van-button>
<van-popup v-model="popupShow3" position="top" class="van-popup-3" :overlay="false">
  更新成功
</van-popup>

<van-button @click="popupShow4 = true">从右方弹出popup</van-button>
<van-popup v-model="popupShow4" position="right" class="van-popup-4" :overlay="false">
  <van-button @click.native="popupShow4 = false">关闭 popup</van-button>
</van-popup>


<van-button @click="popupShow5 = true">从左方弹出popup</van-button>
<van-popup v-model="popupShow5" position="left" class="van-popup-5" :overlay="false">
  <van-button @click.native="popupShow5 = false">关闭 popup</van-button>
</van-popup>

export default {
  data() {
    return {
      popupShow1: false,
      popupShow2: false,
      popupShow3: false,
      popupShow4: false
    }
  },

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

:::

API

Attribute	Description	Type	Default	Accepted Values
v-model	当前组件是否显示	Boolean	false	-
overlay	是否显示背景遮罩层	Boolean	true	-
lockOnScroll	背景是否跟随滚动	Boolean	false	-
position	弹出层位置	String	-	top, bottom, right, left
closeOnClickOverlay	点击遮罩层是否关闭弹出层	Boolean	true	-
transition	弹出层的transition	String	popup-slide
preventScroll	是否防止滚动穿透	Boolean	false	-