# District Picker 行政区选择器

[toc]

行政区选择器组件，支持选择省/市/区

## 组件引入

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

```json

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

```

## 用法

```html
// 常规应用
  <tea-list>
    <tea-form-item type="select" label="选择地区" placeholder="请选择选择地区" value="{{value}}" detail clickable bind:select="_handleTimeClicke"></tea-form-item>
  </tea-list>
  <tea-popup show="{{show}}" position="bottom">
    <tea-district-picker bind:confirm="handleChange" bind:cancel="handleCancel"></tea-district-picker>
  </tea-popup>

// 行政区选择器（省/市/区）
  <tea-district-picker bind:confirm="_handleChange"></tea-district-picker>

// 行政区选择器（省/市）
  <tea-district-picker value="{{['广东省', '深圳市']}}" precision="prefecture" bind:confirm="_handleChange"></tea-district-picker>

// 行政区选择器（省）
  <tea-district-picker value="广东省" precision="province" bind:confirm="_handleChange"></tea-district-picker>

```

```js
Page({
	data: {
		value: ""
	}, 
	_handleChange: function (event) {
		const { value, index } = event.detail
		this.setData({
			value
		})
  }
})
```

## Props

| 参数             | 描述            | 类型       | 默认值      |
| -------------- | ------------- | -------- | -------- |
| precision      | -             | `String` | `county` |
| value          | -             | `Array`  | ``       |
| indicatorStyle | 设置选择器中间选中框的样式 | `String` | ``       |
| indicatorClass | 设置选择器中间选中框的类名 | `String` | ``       |
| maskClass      | 设置蒙层的类名       | `String` | ``       |
| maskStyle      | 设置蒙层的样式       | `String` | ``       |

## 事件

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

## 外部样式类

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