Popup 弹出层

使用指南

在 app.json 或 index.json 中引入popup 组件

{
  "usingComponents": {
    "fs-popup": "path/components/popup/index"
  }
}
1
2
3
4
5

代码演示

基础用法

<fs-popup show="{{show1}}" bind:close="handleClose1">
  hello popup
</fs-popup>
1
2
3

弹出位置

<fs-popup show="{{show2}}" position="bottom" bind:close="handleClose2">
</fs-popup>
1
2

属性

参数 说明 类型 默认值
show 当前组件是否显示 Boolean false
z-index z-index 层级 Number 100
overlay 是否显示遮罩层 String true
position 位置,可选值为 top right bottom left String -
duration 动画时长,单位为毫秒 Number 300
overlay-style 自定义背景蒙层样式 String -
transition 动画名称 String -
close-on-click-overlay 点击遮罩层是后关闭 Boolean true
custom-class 自定义的外部样式类 String -

插槽

插槽名 说明
默认插槽 默认slot, 提示内容

事件

event 说明 返回值
close 蒙层关闭时触发 -
click-overlay 点击蒙层时触发 -