vue中使用插件实现省市区街道4级联动

1、安装插件

npm i --save area-linkage-vue area-data-vue

2、在main.js中引入

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)

3、在页面中直接使用

<area-select v-model="selected" :data="$pcaa" :level="1"  type="text" ></area-select> // 省市

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

<area-select v-model="selected" :data="$pcaa" :level="3" type="text"></area-select>// 省市区街道

4、对应的属性

参数                类型            可选值                  默认值           说明

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                -                                             地区数据

disableLinkage="false"     是否要联动数据

5、事件

事件名                说明                                       参数

change             选中值发生变化时触发               目前选择的值