vue城市选择组件

适用于vue的城市选择组件

仓库地址

基本功能：

1. 支持全选、反选以及全部清空。
2. 支持按拼音筛选。
3. 勾选省份将会勾选省份下所有城市。
4. 返回数据可灵活处理。

安装

```npm install cn-region-picker
# 或者
yarn add cn-region-picker
```

用法

组件引入：

// import包
import CnRegionPicker from 'cn-region-picker'
// use
Vue.use(CnRegionPicker)

使用：

```<cn-region-picker
v-model="pickCity"
placeholder="城市"
>
</cn-region-picker>

<!-- 省略代码 -->

data () {

return {

pickCity: []

}

}

<p>选择返回的数据：</p>

[{

"cityIndex": 37,

"id": "210200",

"name": "大连市",

"pinYin": "dalian",

"shortName": "大连"

}, {

"cityIndex": 41,

"id": "210600",

"name": "丹东市",

"pinYin": "dadong",

"shortName": "丹东"

}]

<h2>属性</h2>
<table>
<thead><tr>
<th>参数</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr></thead>
<tbody><tr>
<td>placeholder</td>
<td>不说明</td>
<td>String</td>
<td>选择城市</td>
</tr></tbody>
</table>
<h2>本地运行</h2>
```npm install
npm run dev

原文地址：https://segmentfault.com/a/1190000017269825