# Picker 选择器

[toc]

picker选择器用于单列多列的选择

## 组件引入

在`app.json`或在`index.json`中引入：

```json

{
  "usingComponents": {
    "tea-picker": "../dist/picker/index"
  }
}

```

## 用法

### 单列选择

```html
<tea-picker
	bind:change="handleChange"
	range="{{array}}"
	value="{{value}}"
>
	<view wx:if="{{array[value]}}">{{array[value]}}</view>
	<view
		class="unselect"
		wx:else
	>请选择</view>
</tea-picker>
```

```js
Page({
	data: {
		value: 3,
		array: ['美国', '中国', '巴西', '日本'],
	},
	handleChange: function (event) {
		const { value } = event.detail
		this.setData({ value })
	},
})
```

### 多列选择

```html
<tea-picker
	bind:change="handleMultiChange"
	mode="multiSelector"
	range="{{multiArray}}"
	value="{{multiValue}}"
>
	<view
		wx:if="{{multiArray[multiValue[0]]}}"
	>{{multiArray[0][multiValue[0]].text}} {{multiArray[1][multiValue[1]].text}} {{multiArray[2][multiValue[2]].text}}</view>
	<view
		class="unselect"
		wx:else
	>请选择</view>
</tea-picker>
```

```js
Page({
	data: {
		multiArray: [
			['无脊柱动物', '脊柱动物'],
			['扁性动物', '线形动物', '环节动物', '软体动物', '节肢动物'],
			['猪肉绦虫', '吸血虫']
		],
		multiValue: []
	},
	handleMultiChange: function (event) {
		const { value } = event.detail
		this.setData({
			multiValue: value
		})
	},
})
```

### 级联选择

```html
<tea-picker
	bind:cancel="handleCancel"
	bind:change="handleCascadeChange"
	bind:confirm="handleConfirm"
	mode="cascadeSelector"
	range="{{cascadeList}}"
	value="{{defaultCascadeValue}}"
></tea-picker>
```

```js
Page({
  data: {
    defaultCascadeValue: [1, 1, 0],
    cascadeList: [
      {
        name: '0',
        label: '北京',
        children: [
          {
            name: '0-0',
            label: '市区',
            children: [
              {
                name: '0-0-0',
                label: '东城区',
              },
              {
                name: '0-0-0',
                label: '西城区',
              },
              {
                name: '0-0-0',
                label: '海淀区',
              },
            ],
          },
        ],
      },
      {
        name: '1',
        label: '广东',
        children: [
          {
            name: '1-0',
            label: '广州',
            children: [
              {
                name: '1-0-0',
                label: '天河区',
              },
              {
                name: '1-0-1',
                label: '越秀区',
              },
              {
                name: '1-0-2',
                label: '海珠区',
              },
            ],
          },
          {
            name: '1-1',
            label: '深圳',
            children: [
              {
                name: '1-1-0',
                label: '南山区',
              },
              {
                name: '1-1-1',
                label: '福田区',
              },
              {
                name: '1-1-2',
                label: '宝安区',
              },
            ],
          },
          {
            name: '1-2',
            label: '惠州',
            children: [
              {
                name: '1-2-0',
                label: '惠阳区',
              },
            ],
          },
        ],
      },
      {
        name: '2',
        label: '安徽',
        children: [
          {
            name: '2-0',
            label: '合肥',
            children: [
              {
                name: '2-0-0',
                label: '蜀山区',
              },
            ],
          },
        ],
      },
    ],
  },
  handleCascadeChange(event) {
    console.log(event.detail);
  },
  handleConfirm(event) {
    console.log('点击了确定按钮: ', event.detail);
  },
  handleCancel(event) {
    console.log('点击了取消按钮: ', event.detail);
  },
});

```

## Props

| 参数             | 描述                                                             | 类型       | 默认值        |
| -------------- | -------------------------------------------------------------- | -------- | ---------- |
| range          | 选择器内容，见示例                                                      | `Array`  | `[]`       |
| mode           | 类型，单列：\`selector\`，多列：\`multiSelector\`，级联：\`cascadeSelector\` | `String` | `selector` |
| value          | index值，单选为Number类型，多选为Number\[]                                | `Array`  | -          |
| indicatorStyle | 设置选择器中间选中框的样式                                                  | `String` | \`\`       |
| indicatorClass | 设置选择器中间选中框的类名                                                  | `String` | \`\`       |
| maskClass      | 设置蒙层的类名                                                        | `String` | \`\`       |
| maskStyle      | 设置蒙层的样式                                                        | `String` | \`\`       |

## 事件

| 事件名       | 描述            | 回调参数             |
| --------- | ------------- | ---------------- |
| change    | 滚动滚轮以后触发的回调函数 | { value, index } |
| cancel    | 点击“取消”以后的回调   | -                |
| confirm   | 点击“确定”以后的回调   | { value, index } |
| pickstart | 滚轮开始滚动时的回调    | -                |
| pickend   | 滚轮结束滚动时的回调    | -                |

## 外部样式类

| 类名          | 描述       |
| ----------- | -------- |
| `ext-class` | 组件根节点样式类 |

## CSS变量属性表

| 变量名                     | 默认值     | 描述  |
| ----------------------- | ------- | --- |
| picker-item-text-size   | 15px    | -   |
| picker-border-color     | #d8d8d8 | -   |
| picker-body-inner-width | 200px   | -   |