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。