# 地址选择弹窗组件

## 实现方式

- 使用 van-popup、van-area 组件
- 数据来源@vant/area-data 后续可能会变

## API

### Props

| 参数      | 说明               | 类型      | 默认值 |
| --------- | ------------------ | --------- | ------ |
| show      | 是否显示省市区选择 | _boolean_ | -      |
| title     | 顶部栏标题         | _string_  | -      |
| area-list | 省市区数据         | _object_  | -      |
| value     | 选中的省市区 id    | string    | -      |

### Events

| 事件名       | 说明                            | 回调参数                                    |
| ------------ | ------------------------------- | ------------------------------------------- |
| bind:confirm | 点击右上方完成按钮 一个数组参数 |                                             |
| bind:cancel  | 点击取消按钮时                  | event                                       |
| bind:change  | 选项改变时触发                  | Picker 实例，所有列选中值，当前列对应的索引 |

```html
<area-picker
  show="{{ areaPickerShow }}"
  bind:close="oncloseAreaPicker"
  bind:confirm="onAreaPickerConfirm"
></area-picker>
```

```javascript
 onOpenAreaPicker() {
    this.setData({
      areaPickerShow: true,
    });
  },

  oncloseAreaPicker() {
    this.setData({
      areaPickerShow: false,
    });
  },

  onAreaPickerConfirm(e: any) {
    const { values } = e.detail;
    console.log('当前选择地点为', values as AreaValue[]);
    this.closeAreaPicker();
  },
```