# @wines/backdrop

> The backdrop @wines

Latest version **2.0.0** (published 2025-04-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wines/backdrop
pnpm add @wines/backdrop
yarn add @wines/backdrop
bun add @wines/backdrop
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2025-04-01 |
| First published | 2021-04-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Node | >=16.0.0 |
| Dependencies | 3 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

- npm: https://www.npmjs.com/package/@wines/backdrop
- Repository: https://gitlab.itcjf.com/wines/backdrop
- npm.io page: https://npm.io/package/@wines/backdrop

## Dependencies (3)

- [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0
- [@wines/styles](https://npm.io/package/@wines/styles.md) 2.0.0
- [@wines/animation-group](https://npm.io/package/@wines/animation-group.md) 2.0.0

## Recent versions

- 2.0.0 (latest) — 2025-04-01
- 2.0.0-next.7 (next) — 2025-04-01
- 2.0.0-next.6 — 2025-03-06
- 2.0.0-next.5 — 2025-03-05
- 2.0.0-next.4 — 2025-03-05
- 2.0.0-next.3 — 2025-03-04
- 2.0.0-next.2 — 2025-02-28
- 2.0.0-next.1 — 2025-02-27
- 2.0.0-next.0 — 2025-02-27
- 1.5.1 — 2023-03-07
- 1.5.0 — 2022-11-22
- 1.4.0 — 2022-02-23
- 1.3.5 — 2021-12-03
- 1.3.4 — 2021-09-26
- 1.3.2 — 2021-09-24
- … 2 more at https://npm.io/package/@wines/backdrop/versions

## README

# `@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
<wux-backdrop id="wux-backdrop" />

<view class="page">
	<view class="page__hd">
		<view class="page__title">Backdrop</view>
		<view class="page__desc">背景幕</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<view class="btn-group">
			<wux-button block type="light" bind:click="retain">保持背景幕 retain</wux-button>
			<wux-button block type="light" bind:click="release">释放背景幕 release</wux-button>
		</view>
		<view class="text-center">背景幕锁：{{ locks }}</view>
	</view>
</view>

```

```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](animation-group.md) | wux-animate--fadeIn |
| transparent | `boolean`  | 是否显示透明蒙层                                                        | false               |
| zIndex      | `number`   | 设置蒙层的 z-index                                                      | 1000                |
| bind:click  | `function` | 蒙层点击事件                                                            | -                   |

### Methods/Properties

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

---
_Source: https://npm.io/package/@wines/backdrop · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._