快捷導(dǎo)航

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

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

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

前言

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

但是選擇地址的時(shí)候，不同場(chǎng)景下選擇的范圍不同，就像出門(mén)在外，根據(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í)，所以我們就不得不改一下。

效果圖

首先我們可以先來(lái)看看效果圖：

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

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

先安裝area-linkage-vue的依賴(lài)，命令如下：

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è)非常類(lèi)似，我因?yàn)檫@個(gè)地方錯(cuò)覺(jué)了，以為是一個(gè)，浪費(fèi)了好多時(shí)間。

自帶的是：

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

一定要區(qū)分開(kāi)來(lái)，不然沒(méi)有效果。

在需要添加的頁(yè)面上引入：

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

在data中寫(xiě)：

  pcaaData:pcaa,

在templete中寫(xiě)組件：

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

下面是來(lái)自官方的屬性介紹：

地址：在這里

area-select 組件

參數(shù)	類(lèi)型	可選值	默認(rèn)值	說(shuō)明
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ù)	類(lèi)型	可選值	默認(rèn)值	說(shuō)明
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需要傳入)

事件

事件名	說(shuō)明	參數(shù)
change	選中值發(fā)生變化時(shí)觸發(fā)	目前選擇的值

這就是今天要分享的內(nèi)容，你學(xué)會(huì)了嗎？

總結(jié)

到此這篇關(guān)于vue中集成省市區(qū)街四級(jí)地址組件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue集成省市區(qū)街四級(jí)地址組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: