實現如圖的效果:(點擊“所在地區”,彈出底部的地區選擇器)
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 在頁面導入完成后寫入相應的邏輯