【Vue2】Vant使用Vant Area Data中国省市区数据保姆级教程 Vue2移动端项目实战vant组件 area组件
项目场景：
提示：这里简述项目相关背景：
例如：项目场景：示例:当我想使用地址选择器，然后要获取中国的所有省市县信息，如下图
问题描述
提示：这里描述项目中遇到的问题：
在Vant2的官方文档中，没有很明确的教程流程，防止踩坑，这里出一期保姆级教程
教程开始：
首先你已经掌握了vue2，并且能够熟练使用组件库，例如elementUI等，并且你的Vue2项目已经引入了Vant
这里只对这个地址选择做教程
这是地址的数组信息，肯定是引用，不可能自己去编写的
1 下载@vant/area-data
# 通过 npm npm i @vant/area-data -S //建议保存 # 通过 yarn yarn add @vant/area-data # 通过 pnpm pnpm add @vant/area-data 1.1检查是否下载进来
在你的node_modules里面，有个@vant，看这个里面有没有新增一个area-data，如图
应该是下载到这里面来，如果你用的是小程序版本weapp那请参考别人的教程，原理类似吧。我这里是vue2的移动端项目
2 在需要时用的地方引用
这是官方给出的语句，但是没有说在哪里使用，我一直以为是在main.js里面引用注册全局，结果不是。
请看下面
2.1在页面使用
import { areaList } from '@vant/area-data'; 把这句话 放在页面里面
并且把areaList在data里面使用
// 放在这里 import { areaList } from '@vant/area-data'; export default { data() { return { // 一定要在data里面使用，否则会读取不到 areaList, ... （省略） 然后下载和引用都ok了
接下来就是展示了
3 展示在页面上
<van-field readonly 是否只读 clickable 是否开启点击反馈 is-link 是否展示右侧箭头并开启点击反馈 required 是否显示表单必填星号 name="datetimePicker" 名称，提交表单的标识符 :value="outcsinfo.place" 理解为v-model label="外出地点" 输入框左侧文本 input-align="right" 输入框对齐方式，可选值为 center right placeholder="请选择" @click="onAddress" /> 点击事件 这个是输入框 如图所示
当点击onAddress之后，将弹出van-popup
类似于elementUI中的dialog
然后van-popup里面才包含着我们需要的地址选择器
<van-popup v-model="showAddress" 弹出框的显示与隐藏 boolean值 position="bottom" 弹出框的位置 下面 :style="{ height: '50%' }" > 弹出框的大小 <van-area title="请选择外出地点" @confirm="changeAddress" 点击确认键的回调函数 类似于@click一样的事件 :area-list="areaList" 引入的地址参数 columns-num="2" /> 2只显示市 3显示到县 1只显示省 </van-popup> 当我们点击输入框，
然后显示弹出框 在弹出框里面选择地点
然后把地点赋值给输入框绑定的值
如果基础足够好的话相信看到这里已经都懂了吧
这里是我在methods里面的代码
因为我是获取字符串 所以我没有使用邮政编码
我用foreach循环走了一遍
教程到这里就结束了
贴出代码
<van-field readonly clickable is-link required name="datetimePicker" :value="outcsinfo.place" label="外出地点" input-align="right" placeholder="请选择" @click="onAddress" /> <van-popup v-model="showAddress" position="bottom" :style="{ height: '50%' }" > <van-area title="请选择外出地点" @confirm="changeAddress" :area-list="areaList" columns-num="2" /> </van-popup> import { areaList } from '@vant/area-data'; export default { data() { return { areaList, // 地址 outcsinfo:{ travelMode:'',//出行方式 place:'',//出行地点 isRiskAreatxt:'',// isRiskArea:''//是否中高风险地区，0否1是 }, showAddress:false, // 隐藏弹出框 } },// data结束 methods:{ // 打开地址选择 onAddress(){ this.showAddress=true }, // 点击地址选择框的确认 changeAddress(event){ // console.log(event,'返回格式数组') this.showAddress=false let st='' event.forEach((item)=>{ st=st + item.name }) this.outcsinfo.place=st } }// methods结束 } 关于在Vue中使用Vant组件 area-data数组的教程 结束
