Popup 弹出层

参考 TDesign popup demo，保留不同方向与应用示例，方便直接对比动画节奏。

从顶部、底部、左侧、右侧或中心弹出的浮层组件

演示

9:41

代码示例

<!-- 基础弹出层 -->
  <re-button theme="primary" variant="outline" @click="openBasePopup(idx)" >{{ item.label }}</re-button>

<!-- 应用示例 -->
  <re-button theme="primary" variant="outline" @click="titleVisible = true">底部弹出层-带标题及操作</re-button>
  <re-button theme="primary" variant="outline" @click="customCloseVisible = true">居中弹出层-带自定义关闭按钮</re-button>
  <re-button theme="primary" variant="outline" @click="plainVisible = true">底部弹出层-无遮罩</re-button>

<!-- 当前状态 -->
  <re-popup :key="current" :visible="baseVisible" :placement="currentBase.placement" @update:visible="onBaseVisibleUpdate" > <view :class="baseContentClass"> <text class="demo-popup-text">{{ currentBase.contentText }}</text> </view> </re-popup>
  <re-popup :visible="titleVisible" placement="bottom" @update:visible="onTitleVisibleUpdate"> <view class="demo-sheet"> <view class="demo-sheet__header"> <text class="demo-sheet__btn demo-sheet__btn--cancel">取消</text> <text class="demo-sheet__title">标题文字</text> <text class="demo-sheet__btn demo-sheet__btn--confirm">确定</text> </view> </view> </re-popup>
  <re-popup :visible="customCloseVisible" placement="center" @update:visible="onCustomCloseVisibleUpdate"> <view class="demo-dialog"> <view class="demo-dialog__close" @click="customCloseVisible = false"> <text class="demo-dialog__close-text">×</text> </view> </view> </re-popup>
  <re-popup :visible="plainVisible" placement="bottom" :showOverlay="false" @update:visible="onPlainVisibleUpdate"> <view class="demo-plain"> <text class="demo-popup-text">无遮罩底部弹层</text> </view> </re-popup>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-popup />。

API

Popup Props

名称类型默认值描述必传
visiblebooleanfalse是否显示弹出层N
placementstring"bottom"弹出位置，top/bottom/left/right/centerN
transitionNamestring""过渡动画名称N
closeBtnbooleanfalse是否显示关闭按钮N
closeOnOverlayClickbooleantrue点击遮罩层是否关闭N
showOverlaybooleantrue是否显示遮罩层N
overlayPropsOverlayPropsnull遮罩层属性配置N
zIndexnumber1100元素层级N
safeAreaInsetBottombooleantrue是否开启底部安全区适配N
customStylestring""自定义样式N
overlayStylestring""自定义遮罩层样式N
cachebooleantrue是否缓存弹层节点，关闭后不销毁实例N

Popup Events

名称参数描述
update:visiblevalue: boolean显隐变化时触发
visible-changevisible: boolean显隐变化时触发
close-关闭时触发
open-打开时触发

Popup Slots

名称描述
default默认插槽
Popover 气泡弹出框
参考 popover 示例，提供基础用法、主题样式和 12 个方向定位演示。
PullDownRefresh 下拉刷新
下拉列表区域即可刷新数据，松手后自动加载新内容