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