Popup 弹出层

弹出层容器，从不同方向弹出。

代码演示

Bottom PopupCenter Popup

Bottom Popup

This popup slides up from the bottom. Tap close or overlay to dismiss.

Success

Operation completed

弹出方向

点击按钮触发真实的弹出层

<m-button @click="showBottom = true">Bottom</m-button>

<m-popup :show="showBottom" position="bottom" round closeable
  @close="showBottom = false">
  <div style="padding: 32px 24px; min-height: 200px;">
    <h3>Bottom Popup</h3>
    <p>Content here</p>
  </div>
</m-popup>

API

属性

属性	说明	类型	默认值
show	是否显示	boolean	false
position	弹出位置	center | top | bottom | left | right	center
round	是否为圆角	boolean	false
closeable	是否显示关闭按钮	boolean	false
overlay	是否显示遮罩	boolean	true
close-on-click-overlay	点击遮罩后是否关闭	boolean	true
duration	动画时长（ms）	number	300

事件

属性	说明	类型	默认值
close	关闭时触发	-	-
opened	打开动画结束后触发	-	-
closed	关闭动画结束后触发	-	-