vant/docs/examples-docs/popup.md

Popup 弹出菜单

使用指南

import { Popup } from 'vant';

Vue.component(Popup.name, Popup);

代码演示

基础用法

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

:::demo 基础用法

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

<script>
export default {
  data() {
    return {
      popupShow1: false
    }
  }
};
</script>

:::

从不同位置弹出菜单

可以设置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>

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

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

:::

API

参数	说明	类型	默认值	可选值
value	利用v-model绑定当前组件是否显示	boolean	false	true, false
overlay	是否显示背景遮罩层	boolean	true	true, false
lockOnScroll	背景是否跟随滚动	boolean	false	true, false
position	弹出菜单位置	string		top, bottom, right, left
closeOnClickOverlay	点击遮罩层是否关闭弹出菜单	boolean	true	true, false
transition	弹出菜单的transition	string	popup-slide