快捷導(dǎo)航

vue中集成省市區(qū)街四級(jí)地址組件的實(shí)現(xiàn)過程

更新時(shí)間：2022年12月29日 11:52:37 作者：穆雄雄

我們在開發(fā)中常會(huì)遇到選擇地址的需求,有時(shí)候只需要選擇省就可以,有時(shí)候則需要選擇到市、縣,以至于鄉(xiāng)鎮(zhèn)，甚至哪個(gè)村都有可能,下面這篇文章主要給大家介紹了關(guān)于vue中集成省市區(qū)街四級(jí)地址組件的相關(guān)資料,需要的朋友可以參考下

前言

省市區(qū)地址大家應(yīng)該都不陌生吧，網(wǎng)上買個(gè)東西，得填地址。中午定個(gè)飯，得寫地址；叫個(gè)貨拉拉叫個(gè)跑腿，是不是也得寫地址。

但是選擇地址的時(shí)候，不同場景下選擇的范圍不同，就像出門在外，根據(jù)所處的地域，回答別人“你是哪里的”的話也不一樣。

比如我是山西呂梁柳林縣的，我到了縣城，我的回答是：我是XXX鎮(zhèn)的。

我到了市里，我的回答是：我是XXX縣的。

我到了省城，我的回答則是：我是XXX市的。

當(dāng)我到省外的時(shí)候，我的回答肯定是：我是XXX省的。

在我們項(xiàng)目中也是同樣的道理，有時(shí)候只需要選擇省就可以，有時(shí)候則需要選擇到市、縣，以至于鄉(xiāng)鎮(zhèn)，甚至哪個(gè)村都有可能，不同項(xiàng)目不同的選擇范圍。

許多框架中都會(huì)自帶地址欄組件，比如我們今天要介紹的jeecg-boot中，但是它自帶的只有三級(jí)，也就是到了區(qū)的這一級(jí)，但是我們項(xiàng)目確是需要到五級(jí)，所以我們就不得不改一下。

效果圖

首先我們可以先來看看效果圖：

下拉選擇器，可以切換成四個(gè)下拉列表級(jí)聯(lián)，也可以切換成現(xiàn)在這樣的，不同的標(biāo)簽。

代碼實(shí)現(xiàn)

先安裝area-linkage-vue的依賴，命令如下：

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

在main.js中引入：

import { pca, pcaa } from 'area-data'; // v5 or higher
import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

這個(gè)地方需要注意，由于自帶的jeecg-boot地址欄組件和這個(gè)非常類似，我因?yàn)檫@個(gè)地方錯(cuò)覺了，以為是一個(gè)，浪費(fèi)了好多時(shí)間。

自帶的是：

//jeecg-boot原生的
import VueAreaLinkage from 'vue-area-linkage';
//jeecg原生的
Vue.use(VueAreaLinkage);

一定要區(qū)分開來，不然沒有效果。

在需要添加的頁面上引入：

  import { pcaa } from 'area-data-vue'

在data中寫：

  pcaaData:pcaa,

在templete中寫組件：

<area-cascader v-model='model.administrative' :data='pcaaData' :level='2' type='text' style='width: 100%' />

下面是來自官方的屬性介紹：

地址：在這里

area-select 組件

參數(shù)	類型	可選值	默認(rèn)值	說明
type	String	all/code/text	code	設(shè)置返回的數(shù)據(jù)格式
placeholders	Array	-	[]	設(shè)置 placeholder text
level	Number	0/1/2	1	設(shè)置聯(lián)動(dòng)層級(jí)(0-只選省份/1-省市聯(lián)動(dòng)/2-省市區(qū)聯(lián)動(dòng))
size	String	small/medium/large	medium	設(shè)置輸入框的大小
disabled	Boolean	-	false	是否禁用
data	Object	-	-	地區(qū)數(shù)據(jù)(v5需要傳入)
icon	String	-	area-select-icon	自定義下拉小圖標(biāo)
disableLinkage	Boolean	-	true	地區(qū)選擇是否進(jìn)行聯(lián)動(dòng)

v4 僅支持省市區(qū)聯(lián)動(dòng)，即 v4 不再支持 level 的值為 3(省市區(qū)街聯(lián)動(dòng))

參數(shù)	類型	可選值	默認(rèn)值	說明
type	String	all/code/text	code	設(shè)置返回的數(shù)據(jù)格式
placeholder	String	-	‘’	設(shè)置 placeholder text
level	Number	0/1	0	設(shè)置聯(lián)動(dòng)層級(jí)(0-省市聯(lián)動(dòng)/1-省市區(qū)聯(lián)動(dòng))
size	String	small/medium/large	medium	設(shè)置輸入框的大小
separator	String	-	‘-’	顯示選中文本的分隔符
disabled	Boolean	-	false	是否禁用
data	Object	-	-	地區(qū)數(shù)據(jù)(v5需要傳入)