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

船长在船上

已于 2022-08-18 18:10:17 修改

阅读量2.2k

点赞数 3

分类专栏： Vue 前端开发 javascript 文章标签：前端 javascript vue.js

于 2022-08-18 18:09:21 首次发布

本文链接：https://blog.csdn.net/SmartJunTao/article/details/126410951

版权

Vue 同时被 3 个专栏收录

198 篇文章

订阅专栏

前端开发

140 篇文章

订阅专栏

javascript

66 篇文章

订阅专栏

本文介绍了如何在前端开发中利用Vant UI库实现省市区选择的功能。通过引入@vant/area-data获取默认数据，结合van-field和van-popup组件创建交互式选择弹窗。详细展示了代码实现过程，包括数据绑定、事件监听以及确认和取消操作的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

实现效果：

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;
},

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