## area
Area省市区选择组件
## Import
```js
import { Area } from 'bxs-ui-vue';
```
## Example
基础用法
```html
<bxs-area 
    v-model="isShow" 
    :area-data="areaData" 
    :area-select="value"
    @confirm="confirm">
</bxs-area>
```
默认选中地区
```html
<bxs-area 
    :area-select="value1" 
    v-model="isShow2" 
    :area-data="areaData" 
    @confirm="confirm2" 
    :key-name="keyName" 
    :value-name="valueName" 
    :title="title">
</bxs-area>
```

```js
data() {
    return {
      isShow: false,
      isShow2: false,
      areaData: {
        provinceList: province,
        cityList: city,
        countyList: area,
      },
      value1:'',
      value1: '110101',
      valueName: 'name',
      keyName: 'code',
      title:'修改标题',
      selectData: {
        provinceName: '',
        cityName: '',
        countyName: '',
      },
      selectData2: {
        provinceName: '',
        cityName: '',
        countyName: '',
      },
    }
  },
  methods: {
    confirm(data) {
      this.selectData = data
    },
    confirm2(data) {
      this.selectData2 = data
    }
  },
  components: {
    [Area.name]: Area
  }
```
## Attribute

| 参数 | 说明 | 类型 | 默认值 |
| :-: | :-: | :-: | :-: |
| v-model | 必选,是否显示组件 | Boolean | false |
| title | 可选,标题 | String | 选择地区 |
| ~~show-district~~ | 是否显示区(3.7.0已废弃) | Boolean | true |
| area-select | 默认选中的值 | String,Number | - |
| key-name | 地区显示的key | String | code |
| value-name | 地区显示的值 | String | name |
| area-data | 必选,地区数据 | Object | - |

show-district已废弃，现在区和市根据area-data数据里面的cityList、countyList来显示

比如只显示省：

```js
{
    provinceList:[{
      code: 110000,
      name: '北京市'
    }]
}
```
只显示市：

```js
{
    provinceList:[{
      code: 110000,
      name: '北京市'
    }],
    cityList:[{
      code: 110100,
      name: '北京市',
      parentId: 110000
    }]
}
```
area-data整体是一个 Object,包含 provinceList, cityList, countyList 三个key  

area-data具体格式:
```js
{
  provinceList:[{
    code: 110000,
    name: '北京市'
  },{
    code: 120000,
    name: '天津市'
  }],
  cityList:[{
    code: 110100,
    name: '北京市',
    parentId: 110000
  },{
    code: 120100,
    name: '天津市',
    parentId: 120000
  }],
  countyList:[{
    code: 110101,
    name: '东城区',
    parentId: 110100
  },{
    code: 110102,
    name: '西城区',
    parentId: 110100
  }]
}
```

### Slot
无

### Event
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| confirm | 点击确定后回调事件 | 选中的省市区对象 |

返回的数据格式具体:
```js
{
    cityCode: 110100,
    cityName: "北京市",
    countyCode: 110101,
    countyName: "东城区",
    provinceCode: 110000,
    provinceName: "北京市"
}
```
