# @wines/popup-select

> The popup-select @wines

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

## Install

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

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

## Links

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

## Dependencies (7)

- [@wines/core](https://npm.io/package/@wines/core.md) 2.0.0
- [@wines/popup](https://npm.io/package/@wines/popup.md) 2.0.0
- [@wines/radio](https://npm.io/package/@wines/radio.md) 2.0.0
- [@wines/styles](https://npm.io/package/@wines/styles.md) 2.0.0
- [@wines/checkbox](https://npm.io/package/@wines/checkbox.md) 2.0.0
- [@wines/radio-group](https://npm.io/package/@wines/radio-group.md) 2.0.0
- [@wines/checkbox-group](https://npm.io/package/@wines/checkbox-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-select/versions

## README

# `@wines/popup-select`

# PopupSelect 下拉框

用于弹出一个下拉菜单给用户选择操作。

## 使用指南

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

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

### 示例

```xml
<wux-popup-select
 visible="{{ visible }}"
 controlled
 value="{{ value1 }}"
 options="{{ options1 }}"
 data-index="1"
 bind:confirm="onConfirm"
 bind:valueChange="onValueChange"
 bind:visibleChange="onVisibleChange"
/>
<view class="page">
	<view class="page__hd">
		<view class="page__title">PopupSelect</view>
		<view class="page__desc">下拉框</view>
	</view>
	<view class="page__bd">
		<wux-cell-group>
			<wux-popup-select
			 value="{{ value1 }}"
			 options="{{ options1 }}"
			 data-index="1"
			 bind:confirm="onConfirm"
			 bind:valueChange="onValueChange"
			>
				<wux-cell title="Single" is-link extra="{{ displayValue1 }}" />
			</wux-popup-select>
			<wux-popup-select
			 value="{{ value2 }}"
			 options="{{ options2 }}"
			 multiple
			 data-index="2"
			 bind:confirm="onConfirm"
			 bind:valueChange="onValueChange"
			>
				<wux-cell title="Multiple" is-link extra="{{ displayValue2 }}" />
			</wux-popup-select>
			<wux-popup-select
			 value="{{ value3 }}"
			 options="{{ options3 }}"
			 multiple
			 max="3"
			 data-index="3"
			 bind:confirm="onConfirm"
			 bind:valueChange="onValueChange"
			>
				<wux-cell title="Multiple & max = 3" is-link extra="{{ displayValue3 }}" />
			</wux-popup-select>
		</wux-cell-group>
		<view class="button-sp-area">
			<wux-button block type="light" bind:click="onClick">
				Button click - {{ displayValue1 }}
			</wux-button>
		</view>
	</view>
</view>

```

```ts
import './index.less';

Page({
  data: {
    value1: '',
    value2: '',
    value3: '',
    displayValue1: '请选择',
    displayValue2: '请选择',
    displayValue3: '请选择',
    options1: ['法官', '医生', '猎人', '学生', '记者', '其他'],
    options2: [
      {
        title: 'iPhone 3GS',
        value: '001',
      },
      {
        title: 'iPhone 5',
        value: '002',
      },
      {
        title: 'iPhone 5S',
        value: '003',
      },
      {
        title: 'iPhone 6',
        value: '004',
      },
      {
        title: 'iPhone 6S',
        value: '005',
      },
      {
        title: 'iPhone 6P',
        value: '006',
      },
      {
        title: 'iPhone 6SP',
        value: '007',
      },
      {
        title: 'iPhone SE',
        value: '008',
      },
      {
        title: 'iPhone 7',
        value: '009',
      },
    ],
    options3: [
      {
        title: '画画',
        value: '1',
      },
      {
        title: '打球',
        value: '2',
      },
      {
        title: '唱歌',
        value: '3',
      },
      {
        title: '游泳',
        value: '4',
      },
      {
        title: '健身',
        value: '5',
      },
      {
        title: '睡觉',
        value: '6',
      },
    ],
  },
  setValue(values, key: string) {
    this.setData({
      [`value${key}`]: values.value,
      [`displayValue${key}`]: values.label,
    });
  },
  onConfirm(e) {
    const { index } = e.currentTarget.dataset;
    this.setValue(e.detail, index);
    console.log(`onConfirm${index as string}`, e.detail);
  },
  onValueChange(e) {
    const { index } = e.currentTarget.dataset;
    console.log(`onValueChange${index as string}`, e.detail);
  },
  onVisibleChange(e) {
    this.setData({ visible: e.detail.visible });
  },
  onClick() {
    this.setData({ visible: true });
  },
});
```

## API

| 参数                | 类型            | 描述                                                           | 默认值     |
| ------------------- | --------------- | -------------------------------------------------------------- | ---------- |
| prefixCls           | `string`        | 自定义类名前缀                                                 | wux-select |
| value               | `string, array` | 指定当前选中的条目                                             | -          |
| multiple            | `boolean`       | 是否支持多选                                                   | false      |
| max                 | `number`        | 最多选择几项，设置为 -1 的时候不限制选择                       | -1         |
| options             | `array`         | 下拉列表                                                       | []         |
| options[].value     | `string`        | 属性值                                                         | -          |
| options[].label     | `string`        | 描述                                                           | -          |
| toolbar             | `object`        | 工具栏配置项                                                   | {}         |
| toolbar.title       | `string`        | 标题的文字                                                     | 请选择     |
| toolbar.cancelText  | `string`        | 取消按钮的文字                                                 | 取消       |
| toolbar.confirmText | `string`        | 确定按钮的文字                                                 | 确定       |
| trigger             | `string`        | 触发事件，当包裹的子元素为 `<wux-cell />` 时，点击控制组件显隐 | onClick    |
| defaultVisible      | `boolean`       | 默认是否显隐，当 `controlled` 为 `false` 时才生效              | false      |
| visible             | `boolean`       | 用于手动控制组件显隐，当 `controlled` 为 `true` 时才生效       | false      |
| controlled          | `boolean`       | 是否受控 [说明文档](controlled.md)                             | false      |
| disabled            | `boolean`       | 是否禁用                                                       | false      |
| bind:change         | `function`      | 选择完成后的回调函数                                           | -          |
| bind:confirm        | `function`      | 点击确定按钮时的回调函数                                       | -          |
| bind:cancel         | `function`      | 点击取消按钮时的回调函数                                       | -          |
| bind:visibleChange  | `function`      | 当显隐状态变化时的回调函数                                     | -          |
| bind:valueChange    | `function`      | 每列数据选择变化后的回调函数                                   | -          |

### PopupSelect slot

| 名称 | 描述                         |
| ---- | ---------------------------- |
| -    | 建议包裹 `<wux-cell />` 组件 |

> 下拉列表：options 参数请参考 [Radio](radio.md) 或 [Checkbox](checkbox.md)。

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