使用vant的地域控件追加全部選項(xiàng)
在項(xiàng)目中使用了vant的Area插件，需要進(jìn)行全部匹配，vant本身沒(méi)有實(shí)現(xiàn)，需要改造代碼，方法如下：
<div class="site"> <span class>起點(diǎn)</span> <van-cell v-model="start" @click="areaSelect(0)"></van-cell> </div> <div class="site"> <span>終點(diǎn)</span> <van-cell v-model="end" @click="areaSelect(1)"></van-cell> </div> <van-popup v-model="show" position="bottom"> <van-area :area-list="areaList" @cancel="onCancel" @confirm="onConfirm" @change="change" ref="area" /> </van-popup>
vue的methos中添加下面兩個(gè)方法：
change(picker, value, index){
if(value[0].code != 100000){
if(index == 0){
let addr = this.areaList;
let areaListCode = value[0].code;
let code1 = Object.assign({},addr.city_list,{[areaListCode]:"全部"});
let code2 = Object.assign({},addr.county_list,{[areaListCode]:"全部"});
this.areaList.city_list = code1;
this.areaList.county_list = code2;
}
if (index == 1) {
let addr = this.areaList;
let areaListCode = value[1].code;
let code = Object.assign({},addr.county_list,{[areaListCode]: "全部"});
this.areaList.county_list = code;
}
}
},
areaSelect(type) {
let addr = this.areaList;
this.PickerType = type;
this.show = true;
if(this.PickerType == 1 && this.endAddrInfo == "請(qǐng)選擇"){
this.$refs.area.reset();
};
let province_list = Object.assign({},addr.province_list,{100000:"全部"});
let city_list = Object.assign({},addr.city_list,{100100:"全部"});
let county_list = Object.assign({},addr.county_list ,{100101:"全部"});
this.areaList={
province_list,city_list,county_list
};
},
補(bǔ)充知識(shí)：使用vant中的Area 省市區(qū)選擇和Area控件如果沒(méi)有選中第三級(jí)的話就選不到當(dāng)前值
今天要使用Area選擇器在網(wǎng)上查了很多方法一直都無(wú)法讓他隱藏再?gòu)棾鰜?lái)今天我就寫(xiě)下我的心得
效果圖如下:
Area組件一般都是配合van-cell使用的
1，在加載頁(yè)面的時(shí)候我讓show為false
然后在點(diǎn)擊了van-cell組件之后調(diào)用areaSelect方法把show變?yōu)閠rue就能顯示
然后還有就是如要要有聯(lián)動(dòng)效果一定要在給個(gè)初始值,這個(gè)的作用就是你點(diǎn)擊area控件之后彈出控件就算不選址直接點(diǎn)擊確定也可以有默認(rèn)值
在者就是要想取的值一定要給onChange寫(xiě)成這樣,不然的話,如果你沒(méi)有觸發(fā)第三級(jí)(就是區(qū)縣的話)就不會(huì)刷新就是還是上一個(gè)選中的區(qū)縣的值,剛開(kāi)始我是寫(xiě)成這樣
錯(cuò)誤的:
正確的:
以上這篇使用vant的地域控件追加全部選項(xiàng)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?echarts實(shí)例項(xiàng)目地區(qū)銷(xiāo)量趨勢(shì)堆疊折線圖實(shí)現(xiàn)詳解
Echarts，它是一個(gè)與框架無(wú)關(guān)的 JS 圖表庫(kù)，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，因?yàn)槲业牧?xí)慣，每次新嘗試做一個(gè)功能的時(shí)候，總要新創(chuàng)建個(gè)小項(xiàng)目，做做Demo2022-09-09
Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)詳解(select空白bug解決)
最近開(kāi)始學(xué)習(xí)vue,在學(xué)習(xí)的過(guò)程中遇到的問(wèn)題將記錄在這里,下面這篇文章主要給大家介紹了關(guān)于Vue設(shè)置select下拉框的默認(rèn)選項(xiàng)(select空白bug解決)的相關(guān)資料,需要的朋友可以參考下2022-12-12
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
詳解如何制作并發(fā)布一個(gè)vue的組件的npm包
這篇文章主要介紹了詳解如何制作并發(fā)布一個(gè)vue的組件的npm包，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
這篇文章主要為大家詳細(xì)介紹了vue路由傳參的3種基本模式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
Vant?如何修改van-collapse-item右側(cè)圖標(biāo)
這篇文章主要介紹了Vant?如何修改van-collapse-item右側(cè)圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3實(shí)現(xiàn)多層級(jí)列表的項(xiàng)目實(shí)踐
本文主要介紹了vue3實(shí)現(xiàn)多層級(jí)列表的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，和React，都自稱自己只關(guān)注視圖層，全家桶對(duì)于開(kāi)發(fā)一個(gè)完整的中大型單頁(yè)面應(yīng)用項(xiàng)目所必須的所必須的插件和框架，本文給大家分享Vue全家桶入門(mén)基礎(chǔ)教程，感興趣的朋友一起看看吧2021-05-05
mpvue 項(xiàng)目初始化及實(shí)現(xiàn)授權(quán)登錄的實(shí)現(xiàn)方法
這篇文章主要介紹了mpvue 項(xiàng)目初始化及實(shí)現(xiàn)授權(quán)登錄的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧
這篇文章主要為大家介紹了vue項(xiàng)目中一定會(huì)用到的性能優(yōu)化技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07