vue使用Vue-area-linkage实现省市区三级联动和省市区街道四级联动

1.废话不说，先看效果

第一个四级联动我设置的默认地址为河南省信阳市光山县弦山街道。

2.开始安装

 npm i --save area-linkage-vue

3.全局注册

 import VueAreaLinkage from 'area-linkage-vue';
 import 'vue-area-linkage/dist/index.css'; 
 import { pcaa } from "area-data-vue";
 Vue.use(VueAreaLinkage);
 Vue.prototype.$pcaa = pcaa;

4.页面使用

vue-area-linkage有两种组件，一种是area-select，一种为area-cascader。

area-select 组件一些参数:

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

area-cascader 组件一些参数:

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

图一上面两个我使用的是area-select，下面一个使用的是area-cascader。

<area-select  type='text'  v-model="selected" :data="$pcaa" :level="2"></area-select>

还可以加一些样式

 .area-select.large{
    width: 100%;
    line-height: 20px;
 }

5.重置问题

还有一个小问题，area-select 和area-cascader重置之后，城市信息还显示，这里有一个解决办法。

 reset() {
   this.show = false;
   this.selected = [];
   setTimeout(() => {this.show = true},0);
 }