弹出组件，支持上、下两个方向的弹出组件，基于Modal组件实现。

  • 可设置组件内容弹出的方向，高度和效果执行时间。
  • 可设置组件背景遮罩层的上、下偏移量。
使用说明

引用方式

import { Popup } from '$yo-component';

// 如果你的项目中未使用最新的 ykit-config-yo 插件，可能无法使用上面这个语法糖
// 你仍然可以通过下面这种方式来引用
import Popup from 'yo3/component/popup';

基本用法

最简单用法，从页面底部弹出一个模态浮层。

<Popup show={this.state.show}>
  Popup content
</Popup>

从上向下

通过 direction 属性设置组件的动画方向，默认从页面底部自下向上。

<Popup show={this.state.show} direction="down">
  Popup content
</Popup>

遮罩层偏移

通过 maskOffset 属性设置组件背景遮罩层的偏移量。该属性是一个数组，分别对应上、下偏移量，默认 [0, 0] 。

<Popup show={this.state.show} maskOffset={[44, 0]}>
  Popup content
</Popup>

动画执行时间

通过 duration 属性设置组件打开、关闭过程中的动画执行时间。默认 200ms。

<Popup show={this.state.show} duration={1000}>
  Popup content
</Popup>
属性

show { Bool } #

组件是否显示

默认值: false

duration { Number } #

组件内容显隐时，动画执行时间，单位：ms

默认值: 200ms

height { String/Number } #

组件显示的内容高度

默认值: 'auto'

direction { Enum {'up', 'down'} } #

组件动画打开方向

默认值: 'up'

maskOffset { Array } #

组件背景遮罩层的上、下偏移量

默认值: [0, 0]

extraClass { String } #

附加给组件模态框内容区的额外class

wrapperExtraClass { String } 3.0.10 #

组附加给组件模态框容器(包含了内容区和蒙层)的额外class

方法

onMaskTap #

组件背景遮罩层的点击回调

onShow #

组件打开时，动画触发之前的事件回调

onHide #

组件关闭时，动画触发之前的事件回调