# Select 下拉选择

[toc]

此组件常用语顶部的下拉搜索。

## 组件引入

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

```json
{
  "usingComponents": {
    "tea-select": "../dist/select/index"
  }
}
```

## 用法

首先，在`index.js`里定义需要传入的数据：

```js
Page({
  data: {
		groups_a: [
			{
				placeholder: "请选择小动物",
				name: "group",
				value: "2",
				options: [
					{ text: '小狗', value: '1' },
					{ text: '小猫', value: '2' },
					{ text: '小兔子', value: '3' },
					{ text: '小老鼠', value: '4' },
					{ text: '小虫子', value: '5' }
				]
			}
		],

		groups_b: [
			{
				placeholder: "第一项",
				name: "group_1",
				value: "1",
				options: [
					{ text: '小狗', value: '1' },
					{ text: '小猫', value: '2' },
					{ text: '小兔子', value: '3' },
					{ text: '小老鼠', value: '4' },
					{ text: '小虫子', value: '5' }
				]
			},
			{
				placeholder: "第二项",
				name: "group_2",
				options: [
					{ text: '春', value: '1' },
					{ text: '夏', value: '2' },
					{ text: '秋', value: '3' },
					{ text: '冬', value: '4' }
				]
			}
		],

		groups_c: [
			{
				placeholder: "第一项",
				name: "group_1",
				options: [
					{ text: '小狗', value: '1' },
					{ text: '小猫', value: '2' },
					{ text: '小兔子', value: '3' },
					{ text: '小老鼠', value: '4' },
					{ text: '小虫子', value: '5' }
				]
			},
			{
				placeholder: "第二项",
				name: "group_2",
				value: "4",
				options: [
					{ text: '春', value: '1' },
					{ text: '夏', value: '2' },
					{ text: '秋', value: '3' },
					{ text: '冬', value: '4' }
				]
			},
			{
				placeholder: "第三项",
				name: "group_3",
				options: [
					{ text: '南山', value: '1' },
					{ text: '福田', value: '2' },
					{ text: '宝安', value: '3' }
				]
			}
		]
	}
})

```

然后，新建一个`index.wxs`，写入以下代码，这段代码的作用是点击页面空白处收起下拉选择的列表。

```js
function overallTap(event, ins){
	var select = ins.selectAllComponents(".select");
	if(!select) return;

	for (var i = 0; i < select.length; i++) {
		var element = select[i];
		element.callMethod("hideSelectBody");
	};
	return false;
};

module.exports = {
	overallTap: overallTap,
};

```

最后，在`index.wxml`文件中引入上面的`index.wxs`。

```html
<wxs src="./index.wxs" module="wxs"></wxs>
<view class="box" bind:tap="{{ wxs.overallTap }}">
<!-- your code -->
</view>
```

### 基础用法

```html
<tea-select class="select" placeholder="请选择" groups="{{ groups_a }}" bind:select="select"></tea-select>
```

### 多列下拉选择（最多三列）

```html
<tea-select class="select" placeholder="请选择" groups="{{ groups_b }}" bind:select="select"></tea-select>
```

### 带搜索框的下拉选择

```html
<tea-select class="select" placeholder="请选择" groups="{{ groups_a }}" bind:select="select" searchable searchPlaceholder="搜索"></tea-select>
```

### 自定义 Slots

```html
	<tea-select
		class="select select-slot"
		placeholder="请选择"
		bind:select="select"
		bind:startSelect="startSelect"
		bind:endSelect="endSelect"
		offsetY="{{ 12 }}"
	>
		<view slot="header">
			<!-- Slot Header 内容 -->
		</view>
		<view slot="body" class="demo-select__body">
			<!-- Slot Body 内容 -->
		</view>
	</tea-select>
```

该部分用法较为复杂，详情可查看[代码片段](https://developers.weixin.qq.com/s/UkujaXmu7ImU)。

## Props

| 参数                | 描述         | 类型        | 默认值 |
| ----------------- | ---------- | --------- | --- |
| groups            | 传入的选项以及值   | `Array`   | -   |
| searchable        | 是否可以搜索     | `Boolean` | -   |
| searchPlaceholder | 搜索框的占位文字   | `String`  | -   |
| offsetY           | 搜索框Y轴上偏移的量 | `Number`  | `0` |

## Groups Item 参数

| 参数          | 描述         | 类型       |
| ----------- | ---------- | -------- |
| placeholder | 占位符        | `String` |
| name        | 当前下拉选择的标志符 | `String` |
| value       | 默认传入的值     | `String` |

## Groups Item Options 参数

| 参数    | 描述      | 类型       |
| ----- | ------- | -------- |
| text  | 描述文字    | `String` |
| value | 当前选项标志符 | `String` |

## 事件

| 事件名          | 描述              | 回调参数 |
| ------------ | --------------- | ---- |
| select       | 选择后会触发          | 搜索结果 |
| startSelect  | 选择开始时会触发        | -    |
| endSelect    | 选择结束时触发         | -    |
| searchCancel | 搜索时，点击“取消”按钮时触发 | 搜索结果 |
| searchReset  | 搜索时，点击重置按钮时触发   | 搜索结果 |

## Slots

| 名称     | 描述                              |
| ------ | ------------------------------- |
| header | 自定义下拉选择搜索菜单的内容，若设置了`groups`则不生效 |
| body   | 自定义下拉选择待选择内容，若设置了`groups`则不生效   |

## 外部样式类

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

## CSS变量属性表

| 变量名                            | 默认值                         | 描述  |
| ------------------------------ | --------------------------- | --- |
| select-text-size               | @font-size-sm               | -   |
| select-header-height           | 45px                        | -   |
| select-header-background-color | @form-background-base-color | -   |
| select-cell-padding            | 0 10px                      | -   |
| search-drop-search-margin      | 0 15px                      | -   |

## 演示

[在开发者工具中预览效果](https://developers.weixin.qq.com/s/UkujaXmu7ImU)。