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 | 点击蒙层时触发 | - |