vue vant van-area实现地区联动省市区三级选择

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客
🔨🔨🔨  简介：资深前端开发工程师，专注前端开发，欢迎咨询交流，共同学习

🔔🔔🔔   感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。  
 

实现效果：

 

 

vant文档：Vant 2 - Mobile UI Components built on Vue 

注意事项：

@vant/area-data

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入：

npm install @vant/area-data
//或者
yarn add @vant/area-data

import { areaList } from '@vant/area-data';

export default {
  data() {
    return { areaList };
  },
};

areaList 数据要先安装再使用

HTML结构：

<van-cell-group inset>
        <van-field v-model="areaValue" label="所在地区" readonly placeholder="选择省、市、区" @click.native="handleArea">
          <template #extra >
            <img src="../../assets/img/bottom.png" class="zsImg">
          </template>
        </van-field>
</van-cell-group>

配合弹窗popup组件

<!-- 所在地区弹窗 -->
    <van-popup v-model="isShowArea" position="bottom" round class="area-content" :overlay="true" :close-on-click-overlay="true">
      <van-area title="所在地区" :area-list="areaList" :columns-placeholder="['请选择', '请选择', '请选择']" @confirm="areaConfirm" @cancel="areaCancel"/>
</van-popup>

js：

isShowArea:false,
areaList,
areaValue:"",

点击坐在地区调用弹窗：

handleArea(){
      this.isShowArea = true;
},

点击地区弹窗确认按钮操作数据处理：

areaConfirm(data){
      let province = data[0];
      let city = data[1];
      let area = data[2];
      if(province.name){
        console.log(province,"省");
      }else{
        this.$toast("请选择省");
        return;
      }

      if(city.name){
        console.log(city,"市");
      }else{
        this.$toast("请选择市");
        return;
      }
      if(area.name){
        console.log(province,"区");
      }else{
        this.$toast("请选择区");
        return;
      }

      this.areaValue = province.name+city.name+area.name;
      this.isShowArea = false;
},

 取消按钮操作处理：

areaCancel(){
      this.isShowArea = false;
},

 

  👉👉👉  欢迎来访船长在船上的博客，如有疑问可以留言、评论，看到后会及时回复。