Vant Popup pop-up layer

Introduced

Pop-up layer containers for displaying pop-up windows, informational tips, and more, supporting multiple pop-up overlays

Introduced

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

Vue.use(Popup);

Code demo

Basic usage

Control whether the pop-up layer is displayed through v-model

<van-cell is-link @click="showPopup">展示弹出层</van-cell>
<van-popup v-model="show">内容</van-popup>

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

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

The ejection position

By setting the pop-up position by theposition property, the default center pop-up can be set to top, bottom, left, right

<van-popup
  v-model="show"
  position="top"
  :style="{ height: '20%' }"
/>

Turn off the icon

When you set the closeable property, the off icon appears in the upper right corner of the pop-up layer, and you can customize the icon with the close-icon property, which allows you to customize the icon position

<van-popup
  v-model="show"
  closeable
  position="bottom"
  :style="{ height: '20%' }"
/>
<!-- 自定义图标 -->
<van-popup
  v-model="show"
  closeable
  close-icon="close"
  position="bottom"
  :style="{ height: '20%' }"
/>
<!-- 图标位置 -->
<van-popup
  v-model="show"
  closeable
  close-icon-position="top-left"
  position="bottom"
  :style="{ height: '20%' }"
/>

Fillet bounce window

When theround property is set, the pop-up window adds different fillet styles depending on where it pops up

<van-popup
  v-model="show"
  round
  position="bottom"
  :style="{ height: '20%' }"
/>

Specify the mount location

The eject layer is mounted to the component location by default, and the mount location can be specified by the get-container property

<!-- 挂载到 body 节点下 -->
<van-popup v-model="show" get-container="body" />

<!-- 挂载到 #app 节点下 -->
<van-popup v-model="show" get-container="#app" />

<!-- 通过函数指定挂载位置 -->
<van-popup v-model="show" :get-container="getContainer" />

export default {
  methods: {
    // 返回一个特定的 DOM 节点，作为挂载的父节点
    getContainer() {
      return document.querySelector('.my-container');
    }
  }
}

Note: Components that use the get-container property cannot be root nodes

Api

Props

Events