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、基本使用

部分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、弹窗中使用

    


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：输入框左侧文本