Popup 弹出层

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

基础用法

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

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

弹出位置

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

设置 closeable 属性后，会在弹出层的右上角显示关闭图标，并且可以通过 close-icon 属性自定义图标，使用 close-icon-position 属性可以自定义图标位置。

圆角弹窗

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

  1. <van-popup
  2.   round
  3.   position="bottom"
  4.   :style="{ height: '30%' }"

指定挂载位置

Props

Slots

类型定义

组件导出以下类型定义：

  1. import type {
  2.   PopupProps,
  3.   PopupPosition,
  4.   PopupInstance,
  5.   PopupCloseIconPosition,

样式变量

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