vue項目中在移動端底部彈出地區選擇器


實現如圖的效果:(點擊“所在地區”,彈出底部的地區選擇器)

 

1 在main.js中導入要用到的兩個vant組件,一個“彈出層”一個“地區選擇器”

 

 

 2  再來看一下頁面的布局

 1   <div class="content" @click="selectAddress">
 2           <div class="left-item">
 3             <div class="title">所在地區:</div>
 4           </div>
 5           <input
 6             type="text"
 7             readonly="readonly"
 8             class="input-box"
 9             v-model="from.addr"
10             placeholder="請選擇省, 市, 區, 街道"
11           />
12           <span class="inputicon">></span>
13  </div>

3 在頁面中直接當標簽使用,其中最重要的地區數據areaList需要導入進來才能使用

<van-popup v-model="show" position="bottom">
        <van-area @confirm="confirm" @cancel="cancel" :area-list="areaList" />
</van-popup>

 

 

4 在靜態文件里面新建一個areaList.js文件,導入全國的地區城市

 

 

 

 

5 在頁面導入完成后寫入相應的邏輯

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM