Vue如何使用vue-area-linkage实现地址三级联动效果

不少时候咱们须要使用地址三级联动，即省市区三级联动。网上有不少插件，在此介绍Vue的一款地区联动插件：vue-area-linkage，下面介绍如何使用这个插件实现地址联动效果：

1、安装

// v5以前的版本
npm i --save vue-area-linkage // v5及以后的版本
npm i --save vue-area-linkage area-data

or yarn

// v5以前的版本
yarn add vue-area-linkage // v5及以后的版本
yarn add vue-area-linkage area-data

 

 2、在main.js上进行依赖注入

import Vue from 'vue'; import { pca, pcaa } from 'area-data'; // v5 or higher
import 'vue-area-linkage/dist/index.css'; // v2 or higher
import VueAreaLinkage from 'vue-area-linkage'; Vue.use(VueAreaLinkage)

3、组件中使用

// v5以前的版本
<area-select v-model="selected"></area-select>
<area-cascader v-model="selected2"></area-cascader>

// v5及以后的版本
<area-select v-model="selected" :data="pca"></area-select> // 省市 // 省市区：<area-select v-model="selected" :data="pcaa"></area-select>
<area-cascader v-model="selected2" :data="pca"></area-cascader> // 省市 // 省市区：<area-cascader v-model="selected2" :data="pcaa"></area-cascader> //setting
<area-select type='all' :level='2' v-model="selected" :data="pcaa"></area-select>
<area-cascader type='all' v-model="selected2" :level='1' :data="pcaa"></area-cascader>

组件中还须要引入

import { pca, pcaa } from 'area-data';

同时data数据中

selected: [], pca: pca, pcaa: pcaa

属性

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

type值能够更改返回的数据格式颇有用

v4 仅支持省市区联动，即 v4 再也不支持 level 的值为 3(省市区街联动)

area-cascader 组件

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

 

另：

　　你们能够看到只是出现基本的效果，而样式看起来很不舒服，这是由于该插件的UI基于Element UI，因此若是须要使用样式须要依赖Element UI。可是不少状况下设计图的样式都是咱们自定义的，此时能够自行修改样式代码，只须要在文件中写多一个公共的style文件修改对应的类名样式来覆盖以前的样式代码便可，需注意这个style文件不能够加上scoped。