<template> <List> <span slot="header">地址选择器:默认</span> <Item class="test-style" arrow="horizontal" @onClick="handleClick"> <div slot="title">地址</div> <div slot="content">{{ pickedAddress }}</div> </Item> </List> <Picker ref="addressPicker" title="省份-城市-区域选择器" :visible.sync = "addressPickerShow" :columns="addressColumns" @confirm="addressConfirm" @change="onAddressChange" /> </template> <script> const provinces = ['广东省'];
const getCities = (province) => { let cities = []; switch (province) { case '广东省': cities = ['广州市', '深圳市']; break; default: break; } return cities; }
function getAreas (province, city) { let areas = [] if (province === '广东省') { switch(city) { case '广州市': areas = ['荔湾区', '越秀区', '海珠区', '天河区', '白云区', '黄埔区', '番禺区', '花都区', '南沙区', '从化区', '增城区'] break; case '深圳市': areas = ['罗湖区', '福田区', '南山区', '宝安区', '龙岗区', '盐田区', '龙华区', '坪山区', '光明区']; break; } } return areas; }
export default { data () { return { addressPickerShow: false, titleText: 'titleText', addressColumns: [ { values: provinces }, { values: getCities('广东省') }, { values: getAreas('广东省', '广州市') } ], } }, methods: { handleClick () { this.addressPickerShow = true }, addressConfirm (picker) { this.pickTime = picker.getValues().toString() }, onAddressChange (picker, addressValues, slotIndex) { if (slotIndex === 0) { const cities = getCities(addressValues[0]) picker.setColumnValues(1, cities) picker.setColumnValues(2, getAreas(addressValues[0], cities[0])) } else if (slotIndex === 1) { picker.setColumnValues(2, getAreas(addressValues[0], addressValues[1])) } } } } </script>
|