npm package: @retailwe/ui-area-picker-new
Description: ## 引入
Latest version: 0.0.26

# 级联选择

## 引入

全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。

```json
// app.json 或 index.json
"usingComponents": {
  "wr-area-picker": "@retailwe/ui-area-picker-new/index"
}
```

## 代码演示

### 基本用法

#### 两级联动

```html
<wr-cell title="省市两级联动" is-link bindclick="onTap" data-type="1"></wr-cell>
<wr-area-picker
  show="{{visible1}}"
  area-data="{{areaData}}"
  title="选择地区"
  value="{{value}}"
  columns="{{columns}}"
  bindconfirm="onConfirm"
  data-type="1"
/>
```

#### 三级联动

```html
<wr-cell
  title="省市区三级联动"
  is-link
  bindclick="onTap"
  data-type="2"
></wr-cell>
<wr-area-picker
  show="{{visible1}}"
  area-data="{{areaData}}"
  title="选择地区"
  value="{{value}}"
  columns="{{columns}}"
  bindconfirm="onConfirm"
  data-type="1"
/>
```

```js
Page({
  data: {
    show: false,
    columns: 3,
    areaData: [
      {
        name: '北京市',
        code: '110000',
        children: [
          {
            name: '北京市',
            code: '110100',
            children: [
              {
                name: '东城区',
                code: '110101',
                children: null,
              },
              {
                name: '西城区',
                code: '110102',
                children: null,
              },
              {
                name: '朝阳区',
                code: '110105',
                children: null,
              },
              {
                name: '丰台区',
                code: '110106',
                children: null,
              },
              {
                name: '石景山区',
                code: '110107',
                children: null,
              },
              {
                name: '海淀区',
                code: '110108',
                children: null,
              },
              {
                name: '门头沟区',
                code: '110109',
                children: null,
              },
              {
                name: '房山区',
                code: '110111',
                children: null,
              },
              {
                name: '通州区',
                code: '110112',
                children: null,
              },
              {
                name: '顺义区',
                code: '110113',
                children: null,
              },
              {
                name: '昌平区',
                code: '110114',
                children: null,
              },
              {
                name: '大兴区',
                code: '110115',
                children: null,
              },
              {
                name: '怀柔区',
                code: '110116',
                children: null,
              },
              {
                name: '平谷区',
                code: '110117',
                children: null,
              },
              {
                name: '密云区',
                code: '110118',
                children: null,
              },
              {
                name: '延庆区',
                code: '110119',
                children: null,
              },
            ],
          },
        ],
      },
      {
        name: '天津市',
        code: '120000',
        children: [
          {
            name: '天津市',
            code: '120100',
            children: [
              {
                name: '和平区',
                code: '120101',
                children: null,
              },
              {
                name: '河东区',
                code: '120102',
                children: null,
              },
              {
                name: '河西区',
                code: '120103',
                children: null,
              },
              {
                name: '南开区',
                code: '120104',
                children: null,
              },
              {
                name: '河北区',
                code: '120105',
                children: null,
              },
              {
                name: '红桥区',
                code: '120106',
                children: null,
              },
              {
                name: '东丽区',
                code: '120110',
                children: null,
              },
              {
                name: '西青区',
                code: '120111',
                children: null,
              },
              {
                name: '津南区',
                code: '120112',
                children: null,
              },
              {
                name: '北辰区',
                code: '120113',
                children: null,
              },
              {
                name: '武清区',
                code: '120114',
                children: null,
              },
              {
                name: '宝坻区',
                code: '120115',
                children: null,
              },
              {
                name: '滨海新区',
                code: '120116',
                children: null,
              },
              {
                name: '宁河区',
                code: '120117',
                children: null,
              },
              {
                name: '静海区',
                code: '120118',
                children: null,
              },
              {
                name: '蓟州区',
                code: '120119',
                children: null,
              },
            ],
          },
        ],
      },
    ],
  },
  onTap(e: any) {
    const { type } = e.currentTarget.dataset;
    if (type == 1) {
      this.setData({
        visible1: true,
        columns: 2,
      });
    }
    if (type == 2) {
      this.setData({
        visible1: true,
        columns: 3,
      });
    }
  },
  onConfirm(e: any) {
    const { type } = e.currentTarget.dataset;
    if (type == 1) {
      this.setData({
        visible1: false,
      });
    }
    if (type == 2) {
      this.setData({
        visible1: false,
      });
    }
  },
});
```

### area-picker Props

| 参数      | 说明             | 类型      | 默认值     | 版本 |
| --------- | ---------------- | --------- | ---------- | ---- |
| columns   | 省市区展示列数   | _number_  | `3`     | -    |
| show      | 弹窗显示         | _boolean_ | `false` | -    |
| area-data | 数据源           | _array_   |
| title     | 弹窗标题         | _string_  |
| value     | 当前选中的省市区 | _string_  |
| columsName | 各级行政区的名称，用于未选时的占位内容以及提示 | _array_ | `['省市/地区', '城市', '区']` |
| useLoadingSlot | 是否使用自定义loading插槽 | _boolean_ | `false` |

#### area-data Props

| 参数      | 说明             | 类型      | 默认值     | 版本 |
| --------- | ---------------- | --------- | ---------- | ---- |
| name   | 地域名   | _string_  | -     | -    |
| code | code码| _string_ | -     | -    |
| children | 下级数据 | _array_ | -     | -    |

### area-picker Event

| 事件名     | 说明 | 参数 |
| ---------- | ---- | ---- |
| pullchildren | 通知父组件/页面拉取数据 | `parentCode`: 可选参数，通知拉取该省份代码的下级行政区数据，为空则是通知拉取省级行政区 |
| change | 用户操作控件时触发 | `value`: 当前选取的该级行政区代码，`areas`：当前选择各级行政区组成的数组 |
| confirm | 用户操作控件时触发 | `value`: 当前选取的该级行政区代码，`areas`：当前选择各级行政区组成的数组 |
| close | 用户主动关闭弹框时触发 | - |