# area-data-vue

**Repository Path**: void_rangers/area-data-vue

## Basic Information

- **Project Name**: area-data-vue
- **Description**: 包含常用的各级城市数据（省市区街道、省市区、省市、省、市），以及城市首字母排序的市级数据。
             ——所有数据来源于民政部官网（2020）
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-06-22
- **Last Updated**: 2025-01-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 转载

## README

![npm-version](https://img.shields.io/npm/v/vue-area-linkage.svg) ![license](https://img.shields.io/npm/l/vue-area-linkage.svg)
# area-data-vue
省市区街道数据

## 更新

- 新增一些常用的城市数据包（省市区街道、省市区、省市、省、市），以及按首字母排序的市级数据
- 数据来源【[中华人民共和国民政部](http://www.mca.gov.cn/article/sj/xzqh/)】- 2020年中华人民共和国行政区划代码

## Installation
Install the pkg with npm:
```
npm i --save area-linkage-vue area-data-vue
```

## Usage
```
import Vue from 'vue';
import { pcaa } from 'area-data-vue';
import 'area-linkage-vue/dist/index.css';
import AreaLinkageVue from 'area-linkage-vue';
Vue.prototype.$pcaa = pcaa;

Vue.use(AreaLinkageVue)
```

```
<area-select v-model="selected" :data="$pcaa" :level="0"></area-select>  // 省
<area-select v-model="selected" :data="$pcaa" :level="1"></area-select>  // 省市
<area-select v-model="selected" :data="$pcaa" :level="2"></area-select>  // 省市区：
<area-select v-model="selected" :data="$pcaa" :level="3"></area-select>  // 省市区街道：

<area-cascader v-model="selected2" :data="$pcaa" :level="0"></area-cascader>  // 省市
<area-cascader v-model="selected2" :data="$pcaa" :level="1"></area-cascader> // 省市区：
<area-cascader v-model="selected2" :data="$pcaa" :level="2"></area-cascader> // 省市区街道：

```



## 属性
### area-select 组件
|  参数  |  类型  |  可选值  |  默认值  |  说明  |
|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |
| type | String |  all/code/text | code | 设置返回的数据格式 |
| placeholders | Array | - | [] | 设置 placeholder text |
| level | Number | 0/1/2/3 | 1 | 设置联动层级(0-只选省份/1-省市联动/2-省市区联动/3-省市区街道联动) |
| size | String | small/medium/large | medium | 设置输入框的大小 |
| disabled | Boolean | - | false | 是否禁用 |
| data | Object | - | - | 地区数据 |
| icon | String | - | area-select-icon | 自定义下拉小图标 |
| disableLinkage | Boolean | - | true | 地区选择是否进行联动 |


### area-cascader 组件
|  参数  |  类型  |  可选值  |  默认值  |  说明  |
|  :--:  |  :--:  |  :--:  |  :--:  |  :--:  |
| type | String |  all/code/text | code | 设置返回的数据格式 |
| placeholder | String | - | '' | 设置 placeholder text |
| level | Number | 0/1/2 | 0 | 设置联动层级(0-省市联动/1-省市区联动/2-省市区街道联动) |
| size | String | small/medium/large | medium | 设置输入框的大小 |
| separator | String | - | '-' | 显示选中文本的分隔符 |
| disabled | Boolean | - | false | 是否禁用 |
| data | Object | - | - | 地区数据 |

## 事件

|  事件名  |  说明  |  参数 |
|  :--:  |  :--:  |  :--: |
| change | 选中值发生变化时触发 | 目前选择的值 |


## License
MIT.