项目场景：

提示：这里简述项目相关背景：

例如：项目场景：示例:当我想使用地址选择器，然后要获取中国的所有省市县信息，如下图

---

问题描述

提示：这里描述项目中遇到的问题：

在Vant2的官方文档中，没有很明确的教程流程，防止踩坑，这里出一期保姆级教程
Vant2 Area组件地址

---

教程开始：

首先你已经掌握了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
2
3
4
5
6
7
8
9

1.1检查是否下载进来

在你的node_modules里面，有个@vant，看这个里面有没有新增一个area-data，如图
应该是下载到这里面来，如果你用的是小程序版本weapp那请参考别人的教程，原理类似吧。我这里是vue2的移动端项目

2 在需要时用的地方引用

这是官方给出的语句，但是没有说在哪里使用，我一直以为是在main.js里面引用注册全局，结果不是。

请看下面

2.1在页面使用

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

把这句话 放在页面里面
并且把areaList在data里面使用

// 放在这里
import { areaList } from '@vant/area-data';
export default {
    data() {
      return {
      	// 一定要在data里面使用，否则会读取不到
        areaList,
       	... （省略）
1
2
3
4
5
6
7
8

然后下载和引用都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" />	点击事件
1
2
3
4
5
6
7
8
9
10
11

这个是输入框 如图所示

当点击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>
1
2
3
4
5
6
7
8
9
10

当我们点击输入框，
然后显示弹出框 在弹出框里面选择地点
然后把地点赋值给输入框绑定的值
如果基础足够好的话相信看到这里已经都懂了吧

这里是我在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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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结束
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

关于在Vue中使用Vant组件 area-data数组的教程 结束