Files
timi-tdesign-mobile/docs/components/bottom-popup.md
T
2026-09-21 16:05:14 +08:00

1005 B

BottomPopup 底部弹层

从底部升起的操作面板,可带标题与左右按钮。

基础用法

:::preview 基础用法 || 弹层从视口底部升起,标题栏在内容滚动时吸顶

demo-preview=../demos/bottom-popup/basic.vue

:::

何时使用

需要在移动端承载一组操作或一段表单时使用。它基于 TDesign Mobile 的 Popup,因此遮罩、层级与动画都沿用框架行为。

按钮只抛事件

左右按钮不会自动关闭弹层,只抛出 leftButtonClick / rightButtonClick,关闭与否由业务决定:

<bottom-popup
	v-model="visible"
	title="选择操作"
	@right-button-click="handleConfirm"
/>

按钮文案传空字符串即可隐藏对应按钮;也可以分别用 leftButton / rightButton 插槽完全接管,插槽会收到 onClick。

高度

height 默认 "auto",按内容撑开;传具体值(如 "60vh")时内容区滚动、标题栏吸顶。

API