• Vant React

Popup 弹出层

介绍

弹出层容器,用于展示弹窗、信息提示等内容,支持多个弹出层叠加展示。

引入

import { Popup } from "@taroify/core"
// or
import Popup from "@taroify/core/popup"

代码演示

基础用法

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

<Popup open>内容</Popup>

弹出位置

通过 placement 属性设置弹出位置,默认居中弹出,可以设置为 topbottomleftright

<Popup defaultOpen placement="top" style={{ height: '30%' }} />

关闭图标

设置 Popup.Close 属性后,会在弹出层的右上角显示关闭图标,并且可以通过 closeIcon 属性自定义图标。

<Popup defaultOpen placement="bottom" style={{ height: '30%' }}>
  <Popup.Close />
</Popup>

<!-- 自定义图标 -->
<Popup defaultOpen placement="bottom" style={{ height: '30%' }}>
  <Popup.Close>
    <Cross />
  </Popup.Close>
</Popup>

圆角弹窗

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

<Popup open rounded placement="bottom" style={{ height: '30%' }} />

API

参数 说明 类型 默认值
defaultOpen 默认是否显示弹出层 boolean false
open 是否显示弹出层 boolean false
placement 弹出位置,可选值为 top bottom right left string center
duration 动画时长,单位毫秒 number | string 300
rounded 是否显示圆角 boolean false

Popup.Backdrop Props

参数 说明 类型 默认值
className 背景板类名 string false
style 背景板样式 CSSProperties false
open 是否显示背景板 boolean false
closeable 是否在点击遮罩层后关闭 boolean true
duration 动画时长,单位毫秒 number | string 300

Popup.Close Props

参数 说明 类型 默认值
placement 关闭图标位置,可选值为 top-left
bottom-left bottom-right
string top-right
children 图标内容 ReactNode <Cross />

Events

事件名 说明 回调参数
onClick 点击弹出层时触发 event: ITouchEvent
onClose 关闭弹出层时触发 -