@wines/picker v1.5.1

@wines/picker

Picker 选择器

选择器。

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "wux-picker",
  "usingComponents": {
    "wux-picker": "@wines/picker"
  }
}

示例

<wux-picker
 visible="{{ visible }}"
 controlled
 options="{{ options }}"
 value="{{ value1 }}"
 cascade
 cols="3"
 data-index="1"
 bind:confirm="onConfirm"
 bind:valueChange="onValueChange"
 bind:visibleChange="onVisibleChange"
/>

<view class="page">
	<view class="page__hd">
		<view class="page__title">Picker</view>
		<view class="page__desc">选择器</view>
	</view>
	<view class="page__bd">
		<wux-cell-group>
			<wux-picker
			 options="{{ options }}"
			 value="{{ value1 }}"
			 cascade
			 cols="3"
			 data-index="1"
			 bind:confirm="onConfirm"
			 bind:valueChange="onValueChange"
			>
				<wux-cell title="Multiple & cascader" is-link extra="{{ displayValue1 }}" />
			</wux-picker>
			<wux-picker
			 options="{{ seasons }}"
			 value="{{ value2 }}"
			 data-index="2"
			 bind:confirm="onConfirm"
			 bind:valueChange="onValueChange"
			>
				<wux-cell title="Multiple" is-link extra="{{ displayValue2 }}" />
			</wux-picker>
			<wux-picker
			 options="{{ options }}"
			 value="{{ value3 }}"
			 cascade
			 cols="1"
			 data-index="3"
			 bind:confirm="onConfirm"
			 bind:valueChange="onValueChange"
			>
				<wux-cell title="Single" is-link extra="{{ displayValue3 }}" />
			</wux-picker>
			<wux-picker
			 options="{{ asyncOptions }}"
			 value="{{ value4 }}"
			 cascade
			 cols="{{ asyncCols }}"
			 loading="{{ loading }}"
			 data-index="4"
			 bind:confirm="onConfirm"
			 bind:valueChange="onValueChange"
			>
				<wux-cell title="Multiple & async" is-link extra="{{ displayValue4 }}" />
			</wux-picker>
		</wux-cell-group>
		<view class="button-sp-area">
			<wux-button block type="light" bind:click="onClick">Button click - {{ displayValue1 }}</wux-button>
		</view>
	</view>
</view>

/* eslint-disable @typescript-eslint/no-explicit-any */
import './index.less';
import { defaults } from '../cascader/data';

const seasons = [
  ['王', '马', '蔡'],
  // 云效不支持特殊emojj
  ['撕葱', '粑粑', 'X'],
];

const provinceLite = [
  {
    value: 'bj',
    label: '北京市',
  },
  {
    value: 'zj',
    label: '浙江省',
  },
  {
    value: 'gd',
    label: '广东省',
    disabled: true,
  },
  {
    value: 'hn',
    label: '海南省',
  },
  {
    value: 'cq',
    label: '重庆市',
  },
  {
    value: 'sc',
    label: '四川省',
  },
];

Page({
  data: {
    value1: ['320000', '320800', '320831'],
    value2: [],
    value3: [],
    value4: [],
    asyncCols: 1,
    asyncOptions: provinceLite,
    displayValue1: '请选择',
    displayValue2: '请选择',
    displayValue3: '请选择',
    displayValue4: '请选择',
    options: [] as unknown,
    seasons,
  },
  onLoad() {
    this.setData({ options: defaults });
  },
  setValue(values, key: number) {
    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 number}`, e.detail);
  },
  onValueChange(e) {
    const { index } = e.currentTarget.dataset;
    console.log(`onValueChange${index as number}`, e.detail);
    if (index === '4') {
      this.setValue(e.detail, index);
      this.setData({ loading: true });

      setTimeout(() => {
        const val = e.detail.value;
        const d = [...this.data.asyncOptions];
        const value4: any = [...val];
        let colNum = 1;

        if (val[0] === 'zj') {
          d.forEach((i: any) => {
            if (i.value === 'zj') {
              colNum = 2;
              if (!i.children) {
                i.children = [
                  {
                    value: 'zj-nb',
                    label: '宁波',
                  },
                  {
                    value: 'zj-hz',
                    label: '杭州',
                  },
                ];
                value4.push('zj-nb');
              } else if (val[1] === 'zj-hz') {
                i.children.forEach((j) => {
                  if (j.value === 'zj-hz') {
                    j.children = [
                      {
                        value: 'zj-hz-xh',
                        label: '西湖区',
                      },
                    ];
                    value4.push('zj-hz-xh');
                  }
                });
                colNum = 3;
              }
            }
          });
        } else {
          colNum = 1;
        }

        this.setData({ asyncOptions: d, asyncCols: colNum, value4, loading: false });
      }, 300);
    }
  },
  onVisibleChange(e) {
    this.setData({ visible: e.detail.visible });
  },
  onClick() {
    this.setData({ visible: true });
  },
});

API

Picker props

Picker slot