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