Backdrop 遮罩层
Backdrop 遮罩层,在组件中设置显示蒙层。
# 支持平台
| App(vue) | App(nvue) | H5 | 小程序 |
|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ |
温馨提示
一般来说我们会通过 z-index + position 来进行层级的设置,但是 weex (Nvue)不支持 z-index 设置层级关系,默认越靠后的元素层级越高。
# 代码演示
部分示例演示,完整使用请参考文档API。
# 基础使用
通过 show 属性设置遮罩层显示隐藏,closable 属性设置是否可以点击遮罩层进行关闭。
<!--closable为true时click事件才生效-->
<wui-backdrop :show="show" closable @click="close"></wui-backdrop>
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签内部自定义内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 平台差异说明 |
|---|---|---|---|---|
| show | Boolean | 是否显示遮罩层 | false | - |
| background | String | 遮罩层背景颜色 | rgba(0, 0, 0, 0.6) | 非Nvue端默认值为空,可通过css变量(--wui-bg-color-mask)改变背景颜色 |
| absolute | Boolean | 是否绝对定位,默认为固定定位fixed | false | - |
| full | Boolean | absolute定位且组件在根元素下时是否铺满屏幕 | false | 仅Nvue端有效 |
| zIndex | Number | 遮罩层z-index值 | 997 | Nvue端不支持,默认越靠后的元素层级越高 |
| closable | Boolean | 是否可点击遮罩层,设为true后点击事件生效 | false | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| @click | 点击遮罩层且closable设为true时触发 | - |