@wines/picker-view-cascader v1.5.1

@wines/picker-view-cascader

PickerViewCascader 级联选择器

嵌入页面的联级选择器。

使用指南

在 page.json 中引入组件

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

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">PickerViewCascader</view>
		<view class="page__desc">级联选择器</view>
	</view>
	<view class="page__bd">
		<view class="sub-title">Default</view>
		<wux-picker-view-cascader value="{{ value1 }}" options="{{ options }}" bind:valueChange="onValueChange1" />
		<view class="sub-title">Multiple & cols = 2</view>
		<wux-picker-view-cascader
		 value="{{ value2 }}"
		 options="{{ options }}"
		 cols="2"
		 bind:valueChange="onValueChange2"
		/>
		<view class="sub-title">Multiple & loading</view>
		<wux-picker-view-cascader
		 value="{{ value3 }}"
		 options="{{ province }}"
		 cols="1"
		 loading="{{ loading }}"
		 bind:valueChange="onValueChange3"
		/>
	</view>
</view>

import './index.less';
import { defaults } from '../cascader/data';
import { PickerViewCascaderGetValue } from '@wines/picker-view-cascader';
Page({
  data: {
    value1: [] as string[],
    value2: [] as string[],
    value3: [] as string[],
    options: [] as unknown,
    province: [] as unknown,
    loading: true,
  },
  onLoad() {
    this.setData({ options: defaults });
    setTimeout(() => {
      this.setData({
        province: defaults.map((v, i) => ({ ...v, disabled: i > 3, children: null })),
        loading: false,
      });
    }, 3000);
  },
  onValueChange1(e) {
    const detail = e.detail as PickerViewCascaderGetValue;
    this.setData({ value1: detail.value });
    console.log('onValueChange1', detail);
  },
  onValueChange2(e) {
    const detail = e.detail as PickerViewCascaderGetValue;
    this.setData({ value2: detail.value });
    console.log('onValueChange2', detail);
  },
  onValueChange3(e) {
    const detail = e.detail as PickerViewCascaderGetValue;
    this.setData({ value3: detail.value });
    console.log('onValueChange3', detail);
  },
});

API

CascaderPickerView props