# @wines/select

> The select @wines

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

## Install

```sh
npm install @wines/select
pnpm add @wines/select
yarn add @wines/select
bun add @wines/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 | 3 |
| Unpacked size | 22.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tianyingchun |

## Links

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

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

## README

# `@wines/select`

# Select 下拉框

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

## 使用指南

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

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

### 示例

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

```xml
<wux-select id="wux-select1" />
<wux-select id="wux-select2" />
<wux-select id="wux-select3" />
<view class="page">
	<view class="page__hd">
		<view class="page__title">Select</view>
		<view class="page__desc">下拉框</view>
	</view>
	<view class="page__bd">
		<wux-cell-group>
			<wux-cell
			 title="Single"
			 is-link
			 extra="{{ displayValue1 }}"
			 bind:click="onClick1"
			/>
			<wux-cell
			 title="Multiple"
			 is-link
			 extra="{{ displayValue2 }}"
			 bind:click="onClick2"
			/>
			<wux-cell
			 title="Multiple & max = 3"
			 is-link
			 extra="{{ displayValue3 }}"
			 bind:click="onClick3"
			/>
		</wux-cell-group>
	</view>
</view>

```

```ts
import './index.less';
import { $wuxSelect } from '@wines/select';
import { PopupSelectOptions } from '@wines/popup-select';

Page({
  data: {
    value1: '',
    value2: [] as string[],
    value3: [] as string[],
    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',
      },
    ],
  },
  onClick1() {
    $wuxSelect('#wux-select1').open<'single'>({
      value: this.data.value1,
      options: this.data.options1,
      onConfirm: (value, index: number, options: PopupSelectOptions) => {
        console.log('onConfirm', value, index, options);
        if (index !== -1) {
          this.setData({
            value1: value,
            displayValue1: options[index] as string,
          });
        }
      },
    });
  },
  onClick2() {
    $wuxSelect('#wux-select2').open<'multiple'>({
      value: this.data.value2,
      multiple: true,
      options: this.data.options2,
      onConfirm: (value, index: number[], options: PopupSelectOptions) => {
        console.log('onConfirm', value, index, options);
        this.setData({
          value2: value,
          displayValue2: index.map((n: number) => {
            const item = options[n];
            return typeof item === 'string' ? item : item.title;
          }),
        });
      },
    });
  },
  onClick3() {
    $wuxSelect('#wux-select3').open<'multiple'>({
      value: this.data.value3,
      multiple: true,
      toolbar: {
        title: 'Please choose',
        confirmText: 'ok',
      },
      max: 3,
      options: this.data.options3,
      onChange: (value, index: number[], options: PopupSelectOptions) => {
        console.log('onChange', value, index, options);
        this.setData({
          value3: value,
          displayValue3: index.map((n: number) => {
            const item = options[n];
            return typeof item === 'string' ? item : item.title;
          }),
        });
      },
      onConfirm: (value, index: number[], options: PopupSelectOptions) => {
        console.log('onConfirm', value, index, options);
        this.setData({
          value3: value,
          displayValue3: index.map((n: number) => {
            const item = options[n];
            return typeof item === 'string' ? item : item.title;
          }),
        });
      },
    });
  },
});
```

## API

| 参数                        | 类型                       | 描述                                     | 默认值     |
| --------------------------- | -------------------------- | ---------------------------------------- | ---------- |
| options                     | `object`                   | 配置项                                   | -          |
| options.prefixCls           | `string`                   | 自定义类名前缀                           | wux-select |
| options.value               | `any`                      | 指定当前选中的条目                       | -          |
| options.options             | `array`                    | 下拉列表                                 | []         |
| options.multiple            | `boolean`                  | 是否支持多选                             | false      |
| options.max                 | <code>number,stirng</code> | 最多选择几项，设置为 -1 的时候不限制选择 | -1         |
| options.toolbar             | `any`                      | 工具栏配置项                             | {}         |
| options.toolbar.title       | `string`                   | 标题的文字                               | 请选择     |
| options.toolbar.cancelText  | `string`                   | 取消按钮的文字                           | 取消       |
| options.toolbar.confirmText | `string`                   | 确定按钮的文字                           | 确定       |
| options.onChange            | `function`                 | 选择完成后的回调函数                     | -          |
| options.onConfirm           | `function`                 | 点击确定按钮时的回调函数                 | -          |
| options.onCancel            | `function`                 | 点击取消按钮时的回调函数                 | -          |

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

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