Popup 弹出层
使用指南
在 app.json 或 index.json 中引入popup 组件
{
"usingComponents": {
"fs-popup": "path/components/popup/index"
}
}
1
2
3
4
5
2
3
4
5
代码演示
基础用法
<fs-popup show="{{show1}}" bind:close="handleClose1">
hello popup
</fs-popup>
1
2
3
2
3
弹出位置
<fs-popup show="{{show2}}" position="bottom" bind:close="handleClose2">
</fs-popup>
1
2
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 | 点击蒙层时触发 | - |