# @wines/popup

> The popup @wines

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

## Install

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

## 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 | 4 |
| Unpacked size | 31.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

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

## Dependencies (4)

- [@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/backdrop](https://npm.io/package/@wines/backdrop.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/popup/versions

## README

# `@wines/popup`

# Popup 弹出框

用于显示弹出框。

## 使用指南

### 在 page.json 中引入组件

```json
{
  "navigationBarTitleText": "Popup",
  "usingComponents": {
    "wux-cell-group": "@wines/cell-group",
    "wux-cell": "@wines/cell",
    "wux-button": "@wines/button",
    "wux-popup": "@wines/popup"
  }
}
```

### 示例

```xml
<wux-popup
 closable
 visible="{{ visible1 }}"
 title="Delete"
 content="Are you sure???"
 bind:close="onClose1"
 bind:closed="onClosed1"
>
	<view slot="footer" class="popup__button" bindtap="close1">OK</view>
</wux-popup>
<wux-popup
 position="bottom"
 safeArea
 visible="{{ visible2 }}"
 bind:close="onClose2"
>
	<wux-cell-group title="Your fathers">
		<wux-cell hover-class="none" title="Jack Ma" />
		<wux-cell hover-class="none" title="Pony" />
		<wux-cell hover-class="none">
			<wux-button block type="balanced" bindtap="close2">Yes</wux-button>
		</wux-cell>
	</wux-cell-group>
</wux-popup>
<view class="page">
	<view class="page__hd">
		<view class="page__title">Popup</view>
		<view class="page__desc">弹出框</view>
	</view>
	<view class="page__bd page__bd_spacing">
		<wux-button block type="light" bind:click="open1">Default</wux-button>
		<wux-button block type="light" bind:click="open2">Popup</wux-button>
	</view>
</view>

```

```ts
import './index.less';
Page({
  data: {
    visible1: false,
    visible2: false,
  },
  open1() {
    this.setData({
      visible1: true,
    });
  },
  open2() {
    this.setData({
      visible2: true,
    });
  },
  close1() {
    this.setData({
      visible1: false,
    });
  },
  close2() {
    this.setData({
      visible2: false,
    });
  },
  onClose(key) {
    console.log('onClose');
    this.setData({
      [key]: false,
    });
  },
  onClose1() {
    this.onClose('visible1');
  },
  onClose2() {
    this.onClose('visible2');
  },
  onClosed1() {
    console.log('onClosed');
  },
});
```

## API

### Popup props

| 参数               | 类型            | 描述                                                      | 默认值      |
| ------------------ | --------------- | --------------------------------------------------------- | ----------- |
| prefixCls          | `string`        | 自定义类名前缀                                            | wux-popup   |
| animationPrefixCls | `string`        | 自定义 animation 类名前缀                                 | wux-animate |
| title              | `string`        | 标题                                                      | -           |
| content            | `string`        | 内容                                                      | -           |
| extra              | `string`        | 底部内容                                                  | -           |
| position           | `string`        | 弹出层位置信息，可选值为 center、top、right、bottom、left | center      |
| wrapStyle          | `string,object` | 自定义 wrap 样式                                          | -           |
| closable           | `boolean`       | 是否显示关闭按钮                                          | false       |
| mask               | `boolean`       | 是否显示蒙层                                              | true        |
| maskClosable       | `boolean`       | 点击蒙层是否允许关闭                                      | true        |
| visible            | `boolean`       | 是否可见                                                  | false       |
| disableScroll      | `boolean`       | 是否禁用 popup 弹窗的触摸滑动穿透                         | true        |
| zIndex             | `number`        | 设置蒙层的 z-index                                        | 1000        |
| hasHeader          | `boolean`       | 是否显示头部内容                                          | true        |
| hasFooter          | `boolean`       | 是否显示底部内容                                          | true        |
| bind:close         | `function`      | 点击关闭按钮或蒙层的回调函数                              | -           |
| bind:closed        | `function`      | 关闭后的回调函数                                          | -           |

### Popup externalClasses

| 名称              | 描述           |
| ----------------- | -------------- |
| wux-class         | 根节点样式类   |
| wux-content-class | 主容器样式类   |
| wux-header-class  | 头部内容样式类 |
| wux-body-class    | 主体内容样式类 |
| wux-footer-class  | 底部内容样式类 |
| wux-close-class   | 关闭按钮样式类 |

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