vue中使用Vant组件area

1、下载官方area数据的文档，
area.js
area.ts
如果area.js不存在，则下载area.ts，再转成js文件
把.ts文件名改成.js，再把export const areaList = {}改成export default {}

2、再用到area组件的vue组件中引入
import areaList from '../../assets/js/area.js'

3、基本使用

<van-area title="标题11" :area-list="areaList" confirm-button-text="确实按钮" cancel-button-text="取消按钮" columns-num="3" @cancel="onAreaCancle" @change="onAreaChange" @confirm="onAreaConfirm"/>

部分props说明，详细的看官网：
title：顶部栏标题
area-list：省市区数据，格式见area.js文件
confirm-button-text：确认按钮文字，默认“确定”
cancel-button-text：取消按钮文字，默认“取消”
columns-num：显示列数，3-省市区，2-省市，1-省，默认3

Events说明
confirm：点击右上方完成按钮，一个数组参数，具体格式看area.js数据格式
cancel：点击取消按钮时
change：选项改变时触发，Picker实例，所有列选中值，当前列对应的索引

注：如不需要海外数据，可以删除area.js中的province_list的900000: '海外'

4、弹窗中使用

<van-field type="text" readonly required placeholder="请选择地区" clickable label="地址"  :value="areaValue"  @click="openPopup" />
<van-popup v-model="showArea" position="bottom" :style="{height:'50%'}">
    <van-area :area-list="areaList" @confirm="onAreaConfirm" @cancel="onAreaCancle" />
</van-popup>

onAreaConfirm(val) {
    this.showArea = false
    var addrInfo = val[0].name + '-' + val[1].name + '-' + val[2].name
    this.areaValue = addrInfo
}

组件field的部分Props说明
type：输入框类型, 可选值为 tel digit`number textarea password 等，默认text`
readonly：是否只读
required：是否显示表单必填星号
clickable：是否开启点击反馈
label：输入框左侧文本