Popup 弹出层

引入

基础用法

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

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

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

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

关闭图标

圆角弹窗

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

  1. <van-popup
  2.   v-model:show="show"
  3.   round
  4.   position="bottom"
  5. />

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

  2.   setup() {
  3.     const myContainer = document.querySelector('.my-container');
  4.     return {
  5.       myContainer,
  6.     };
  7.   },
  8. };

API

Props

Events

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