import { Picker,Popup ?} from 'vant';
Vue.use(Picker).use(Popup )

<template>
? ? <div class='login'>
? ? ? ? <van-field?
?? ? ? ? ? ?readonly?
?? ? ? ? ? ?clickable?
?? ? ? ? ? ?label="城市"?
?? ? ? ? ? ?:value="value"?
?? ? ? ? ? ?placeholder="選擇城市"?
?? ? ? ? ? ?@click="showPicker = true"?
?? ? ? ? ?/>
? ? ? ? <van-popup v-model="showPicker" position="bottom">
? ? ? ? ? ? <van-picker?
?? ? ? ? ? ? ? ?show-toolbar?
?? ? ? ? ? ? ? ?:columns="columns"?
?? ? ? ? ? ? ? ?@cancel="showPicker = false"?
?? ? ? ? ? ? ? ?@confirm="onConfirm"
? ? ? ? ? ? ? ? @change="onChange" />
? ? ? ? </van-popup>
? ? </div>
</template>

<script>
? ? const citys = {
? ? ? ? '浙江': ['杭州', '寧波', '溫州', '嘉興', '湖州'],
? ? ? ? '福建': ['福州', '廈門', '莆田', '三明', '泉州']
? ? };
? ? export default {
? ? ? ? name: 'login',
? ? ? ? data() {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? value:'',
? ? ? ? ? ? ? ? showPicker:false,
? ? ? ? ? ? ? ? columns: [
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? values: Object.keys(citys),
? ? ? ? ? ? ? ? ? ? ? ? className: 'column1'
? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? values: citys['浙江'],
? ? ? ? ? ? ? ? ? ? ? ? className: 'column2',
? ? ? ? ? ? ? ? ? ? ? ? defaultIndex: 2
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ]
? ? ? ? ? ? };
? ? ? ? },
? ? ? ? //方法集合
? ? ? ? methods: {
? ? ? ? ? ? onConfirm(value) {
? ? ? ? ? ? ? ? this.value = value[0]+'-'+value[1];
? ? ? ? ? ? ? ? this.showPicker = false;
? ? ? ? ? ? },
? ? ? ? ? ? onChange(picker, values) {
? ? ? ? ? ? ? ? picker.setColumnValues(1, citys[values[0]]);
? ? ? ? ? ? }
? ? ? ? },
? ? }
</script>