主题
Landscape 压屏窗
以遮罩覆盖页面并居中显示内容,可配置关闭按钮。
支持平台
以下为官网文档所列的平台支持情况,具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 自定义压屏内容 -->
<fui-landscape :show="showLandscape" @close="showLandscape = false">
<view>活动内容</view>
</fui-landscape>在页面数据中声明 showLandscape 并按需更新。
属性
| 属性 | 类型 | 说明 | 官网默认值 |
|---|---|---|---|
| show | Boolean | 是否显示 | false |
| closable | Boolean | 是否显示关闭按钮 | true |
| type | String | 关闭按钮图标名称,如 cancel、clear | true(官网表格值) |
| color | String | 关闭按钮颜色 | #fff |
| size | Number / String | 关闭按钮图标大小,单位 px | 28 |
| position | Number / String | 关闭按钮位置:1 左上、2 右上、3 中下 | 3 |
| distance | Number / String | 关闭按钮与内容间距,单位 rpx | 120 |
| absolute | Boolean | 是否使用绝对定位,父容器需设置非 static 定位 | false |
| top | Number / String | 内容上下偏移,单位 rpx,可为负数 | 0 |
| maskClosable | Boolean | 点击遮罩时是否触发关闭事件 | false |
| maskBackground | String | 遮罩背景色 | rgba(0,0,0,.6) |
| zIndex | Number | 层级,nvue 不支持 | 996 |
| param | Number / String | 关闭事件携带的参数 | 0 |
官网表格将 type 默认值列为 true,但类型为字符串;本地源码实际默认值为 cancel。
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| close | 点击关闭按钮或可关闭的遮罩时触发 | { param } |
事件触发后需由父组件将 show 更新为 false。
插槽
| 插槽 | 说明 |
|---|---|
| default | 压屏窗显示内容 |