Popup 弹出层

引入

基础用法

通过 控制弹出层是否展示。

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

通过 position 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。

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

关闭图标

圆角弹窗

设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式。

    弹出层默认挂载到组件所在位置，可以通过 get-container 属性指定挂载位置。

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

    API

    Props

    Events

    组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。