vant按需引入
import { Cell, CellGroup, Popup, Field, Area, Picker } from 'vant’
Vue.use(Area)
Vue.use(Popup)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Field)
Vue.use(Picker)
<template>
<div class="wzl_address">
<!--confirm 点击右上方完成按钮 一个数组参数,具体格式看下方数据格式章节
cancel 点击取消按钮时
change 选项改变时触发 参考Picker 实例,所有列选中值,当前列对应的索引-->
<van-cell-group>
<van-cell v-model="carmodel" title="地区" value @click="show = true"></van-cell>
<van-popup v-model="show" position="bottom">
<van-area
ref="area"
value="110000"
:area-list="areaList"
@change="onChange"
//点及确定按钮
@confirm="yes"
@cancel="show = false"
/>
<div class="wzl_xz">
<img src="../../../public/img/right.svg" alt />
</div>
</van-popup>
</van-cell-group>
</div>
</template>
<script>
//引入所有的省市区
import address from '../../../public/address'
export default {
data () {
return {
show: false,
//当前选择的城市
carmodel: '请选择',
areaList: {
province_list: {},
city_list: {},
county_list: {}
},
//存放当前选择的城市,点击确定时将它赋给carmodel
con: ''
}
},
created () {
console.log(address)
this.areaList.province_list = address.province_list
this.areaList.city_list = address.city_list
this.areaList.county_list = address.county_list
},
methods: {
onChange (picker, value, index) {
console.log('当前值:' + value + '当前索引:' + index)
let areaName = ''
for (var i = 0; i < value.length; i++) {
areaName = areaName + value[i].name + ' '
}
this.con = areaName
},
yes () {
this.carmodel = this.con
this.show = false
}
}
}
</script>
具体查看vant官方文档: https://youzan.github.io/vant/#/zh-CN/area