基於mint-ui 的picker元件的三級城市聯動
阿新 • • 發佈:2018-11-22
html部分
<template> <div class="all" v-if="status"> <div class="top"> <a class="confirm" @click="selectedCity()">確定</a> </div> <mt-picker :slots="myAddressSlots" @change="onMyAddressChange"></mt-picker> <!--<p>地址3級聯動:{{myAddressProvince}} {{myAddressCity}} {{myAddresscounty}}</p>--> </div> </template>
css部分
<style scoped> .confirm{ float: left; color: #00a7e8; position: absolute; top: 6px; right: 40px; } .top{ border-bottom: 1px solid #f0f0f0; height: 40px } .all{ background: #fff; position: fixed; bottom: 0px; left: 0px; right: 0px; z-index: 500; } </style>
js部分
<script> import myaddress from '@/assets/address.json' export default { props: { status: { type: Boolean, default: false } }, data () { return { myAddressSlots: [ { flex: 1, defaultIndex: 1, values: Object.keys(myaddress), // 省份陣列 className: 'slot1', textAlign: 'center' }, { divider: true, content: '-', className: 'slot2' }, { flex: 1, values: [], className: 'slot3', textAlign: 'center' }, { divider: true, content: '-', className: 'slot4' }, { flex: 1, values: [], className: 'slot5', textAlign: 'center' } ], myAddressProvince: '省', myAddressCity: '市', myAddresscounty: '區/縣' } }, created () { }, methods: { onMyAddressChange (picker, values) { if (myaddress[values[0]]) { // 這個判斷類似於v-if的效果(可以不加,但是vue會報錯,很不爽) picker.setSlotValues(1, Object.keys(myaddress[values[0]])) // Object.keys()會返回一個數組,當前省的陣列 picker.setSlotValues(2, myaddress[values[0]][values[1]]) // 區/縣資料就是一個數組 this.myAddressProvince = values[0] this.myAddressCity = values[1] this.myAddresscounty = values[2] } }, selectedCity () { let arr = { province: this.myAddressProvince, city: this.myAddressCity, county: this.myAddresscounty } // 點選確定後向父元件傳值 this.$emit('selectcity', arr) } }, mounted () { this.$nextTick(() => { // vue裡面全部載入好了再執行的函式 (類似於setTimeout) this.myAddressSlots[0].defaultIndex = 0 // 這裡的值需要和 data裡面 defaultIndex 的值不一樣才能夠初始化 // 因為我沒有看過原始碼(我猜測是因為資料沒有改變,不會觸發更新) }) } } </script>
重要的一點就是在選擇完畢後要向父元件派發一個事件
其次三級城市的資料需要自行下載,程式碼很簡單