@wines/popup-select

@wines/popup-select

PopupSelect 下拉框

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

使用指南

在 page.json 中引入组件

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

示例

<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>

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

PopupSelect slot

下拉列表：options 参数请参考 Radio 或 Checkbox。