Vue如何使用vue-area-linkage實現地址三級聯動效果

很多時候我們需要使用地址三級聯動，即省市區三級聯動。網上有很多插件，在此介紹Vue的一款地區聯動插件：vue-area-linkage，下面介紹如何使用這個插件實現地址聯動效果：

一、安裝

// 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

 

 二、在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)

三、組件中使用

// 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。