@wines/backdrop

Backdrop 背景幕

在组件中设置显示蒙层。

使用指南

在 page.json 中引入组件

``json
{
"navigationBarTitleText": "Backdrop",
"usingComponents": {
"wux-button": "@wines/button",
"wux-backdrop": "@wines/backdrop"
}
}
`

示例

> 该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-backdrop 或其他，之后在 page.js 中调用 $wuxBackdrop(context, id) 获取匹配到的第一个组件实例对象。

`xml




Backdrop
背景幕



保持背景幕 retain
释放背景幕 release

背景幕锁：{{ locks }}



`

`ts
import './index.less';
import { $wuxBackdrop, BackdropExports } from '@wines/backdrop';

let wuxBackdrop: BackdropExports;
Page({
data: {
locks: 0,
},
onLoad() {
wuxBackdrop = $wuxBackdrop();
},
retain() {
wuxBackdrop.retain();
this.setData({
locks: wuxBackdrop.backdropHolds,
});
},
release() {
wuxBackdrop.release();
this.setData({
locks: wuxBackdrop.backdropHolds,
});
},
});
`

API

| 参数 | 类型 | 描述 | 默认值 |
| ----------- | ---------- | ----------------------------------------------------------------------- | ------------------- |
| prefixCls | string | 自定义类名前缀 | wux-backdrop |
| classNames | string | 过渡的类名，更多内置过渡效果请参考 AnimationGroup | wux-animate--fadeIn |
| transparent | boolean | 是否显示透明蒙层 | false |
| zIndex | number | 设置蒙层的 z-index | 1000 |
| bind:click | function` | 蒙层点击事件 | - |

$3

- Backdrop.retain()
- Backdrop.release()
- Backdrop.backdropHolds