vue學(xué)習(xí)之mintui picker選擇器實(shí)現(xiàn)省市二級聯(lián)動(dòng)示例

<!-- 頁面模版 --> 
<template> 
 <div> 
 <!--header--> 
 <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header> 
 <!--header end--> 
 <!--container--> 
 <div class="ybb-yuyue"> 
 <div class="yy-item-box mine-me"> 
 <a class="mint-cell mint-field"> 
 <div class="mint-cell-left"></div> 
 <div class="mint-cell-wrapper"> 
 <div class="mint-cell-title"> 
 <span class="mint-cell-text">頭像</span> 
 </div> 
 <div class="mint-cell-value"> 
 <div class="mint-cell-value"></div> 
 <img v-bind:src="data.photo" :onerror="headImg" class="img-box5"> 
 </div> 
 </div> 
 </a> 
 </div> 
 <div class="yy-item-box mine-me"> 
 <a class="mint-cell mint-field"> 
 <div class="mint-cell-left"></div> 
 <div class="mint-cell-wrapper"> 
 <div class="mint-cell-title"> 
 <span class="mint-cell-text">姓名</span> 
 </div> 
 <div class="mint-cell-value"> 
 <div class="mint-cell-value"> 
 <input placeholder="請輸入姓名" type="text" class="mint-field-core text-right" v-model="data.userName"> 
 <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div> 
 </div> 
 </div> 
 </div> 
 </a> 
 <a class="mint-cell mint-field"> 
 <div class="mint-cell-left"></div> 
 <div class="mint-cell-wrapper"> 
 <div class="mint-cell-title"> 
 <span class="mint-cell-text">性別</span> 
 </div> 
 <div class="mint-cell-value"> 
 <div class="mint-cell-value is-link" @click="sexVisible = true"> 
 <input placeholder="請選擇性別" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.sexText"> 
 <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div> 
 </div> 
 </div> 
 <i class="mint-cell-allow-right"></i> 
 <mt-actionsheet :actions="sexs" v-model="sexVisible" cancel-text="取消"></mt-actionsheet> 
 </div> 
 </a> 
 <a class="mint-cell mint-field"> 
 <div class="mint-cell-left"></div> 
 <div class="mint-cell-wrapper"> 
 <div class="mint-cell-title"> 
 <span class="mint-cell-text">出生日期</span> 
 </div> 
 <div class="mint-cell-value"> 
 <div class="mint-cell-value is-link" @click="open('datePicker')"> 
 <input placeholder="請選擇日期" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.birthday"> 
 <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div> 
 </div> 
 </div> 
 <i class="mint-cell-allow-right"></i> 
 <mt-datetime-picker 
 ref="datePicker" 
 type="date" 
 :startDate="startDate" 
 :endDate="endDate" 
 v-model="dateValue" 
 @confirm="handleChange"> 
 </mt-datetime-picker> 
 </div> 
 </a> 
 </div> 
 <div class="yy-item-box mine-me"> 
 <a class="mint-cell mint-field"> 
 <div class="mint-cell-left"></div> 
 <div class="mint-cell-wrapper"> 
 <div class="mint-cell-title"> 
 <span class="mint-cell-text">電話號(hào)碼</span> 
 </div> 
 <div class="mint-cell-value"> 
 <div class="mint-cell-value"> 
 <input placeholder="請輸入電話號(hào)碼" type="text" readonly="readonly" class="mint-field-core text-right gray" v-model="data.mobile"> 
 <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div> 
 </div> 
 </div> 
 </div> 
 </a> 
 <a class="mint-cell mint-field"> 
 <div class="mint-cell-left"></div> 
 <div class="mint-cell-wrapper"> 
 <div class="mint-cell-title"> 
 <span class="mint-cell-text">所在地區(qū)</span> 
 </div> 
 <div class="mint-cell-value"> 
 <div class="mint-cell-value is-link" @click="choiceArea"> 
 <input placeholder="請選擇省市" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.areaText"> 
 <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div> 
 </div> 
 </div> 
 <i class="mint-cell-allow-right"></i> 
 <mt-popup v-model="popupVisible" position="bottom" class="mint-popup-4"> 
 <div class="picker-toolbar"> 
 <span class="mint-datetime-action mint-datetime-cancel" @click="cancleaddress">取消</span> 
 <span class="mint-datetime-action mint-datetime-confirm" @click="selectaddress">確定</span> 
 </div> 
 <mt-picker :slots="citySlots" @change="onCityChange" :visible-item-count="3"></mt-picker> 
 </mt-popup> 
 </div> 
 </a> 
 <a class="mint-cell mint-field"> 
 <div class="mint-cell-left"></div> 
 <div class="mint-cell-wrapper"> 
 <div class="mint-cell-title"> 
 <span class="mint-cell-text">詳細(xì)地址</span> 
 </div> 
 <div class="mint-cell-value"> 
 <div class="mint-cell-value"> 
 <input placeholder="街道、樓牌號(hào)等" type="text" class="mint-field-core text-right" v-model="data.address"> 
 <div class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></div> 
 </div> 
 </div> 
 </div> 
 </a> 
 </div> 
 </div> 
 <div class="yuyue-submit"> 
 <button class="mint-button mint-button--default mint-button--large ybb-btn" @click="infoSave"><label class="mint-button-text title-1">保存</label></button> 
 </div> 
 <!--container end--> 
 </div> 
</template> 
<script> 
import {Toast} from 'mint-ui' 
import validators from '../utils/validators' 
import comHeader from 'components/comHeader' 
import mineInfoService from 'SERVICES/mineInfoService' 
 
export default { 
 components: { 
 comHeader 
 }, 
 data: () => ({ 
 headImg: 'this.src="' + require('../assets/img.png') + '"', 
 headerData: { 
 title: '我的資料', 
 toLink: '/Mine' 
 }, 
 popupVisible: false, 
 sexVisible: false, 
 areaPicker: '', 
 areaList: [], 
 data: { 
 photo: '', 
 userName: '', 
 sex: '', 
 sexText: '', 
 mobile: '', 
 birthday: '', 
 privinceName: '', 
 provinceId: '', 
 cityName: '', 
 cityId: '', 
 address: '', 
 areaText: '' 
 }, 
 sexs: [], 
 citySlots: [ 
 { 
 flex: 1, 
 values: Object.keys(address), 
 className: 'slot1', 
 textAlign: 'center' 
 }, { 
 divider: true, 
 content: '-', 
 className: 'slot2' 
 }, { 
 flex: 1, 
 values: Object.values(address)[0], 
 className: 'slot3', 
 textAlign: 'center' 
 } 
 ], 
 addressProvince: '', 
 addressProvinceId: '', 
 addressCity: '', 
 addressCityId: '', 
 dateValue: new Date(), 
 startDate: new Date('1900-01-01'), 
 endDate: new Date() 
 }), 
 created () { 
 this.loadMineInfo() 
 this.loadAreaList() 
 }, 
 mounted () { 
 this.sexs = [{ 
 name: '男', 
 method: this.selectMan 
 }, { 
 name: '女', 
 method: this.selectWoman 
 }] 
 }, 
 methods: { 
 loadAreaList: function () { 
 mineInfoService.loadAreaList().then(res => { 
 if (res.t) { 
 this.areaList = res.t 
 address = this.areaList.areaList[0] 
 provinceCodeList = this.areaList.provinceCodeList[0] 
 cityCodeList = this.areaList.cityCodeList[0] 
 this.citySlots[0].values = Object.keys(address) 
 this.citySlots[2].values = Object.values(address)[0] 
 } else { 
 Toast('地區(qū)數(shù)據(jù)異常') 
 } 
 }) 
 }, 
 choiceArea: function () { 
 this.popupVisible = true 
 // 設(shè)置默認(rèn)選中 
 if (this.data.privinceName !== '' && this.data.cityName !== '') { 
 this.areaPicker.setSlotValue(0, this.data.privinceName) 
 this.areaPicker.setSlotValue(1, this.data.cityName) 
 console.log(this.data.privinceName + '-' + this.data.cityName) 
 } 
 }, 
 cancleaddress: function () { 
 this.popupVisible = false 
 this.areaPicker.setSlotValue(0, this.data.privinceName) 
 this.areaPicker.setSlotValue(1, this.data.cityName) 
 }, 
 selectaddress: function () { 
 this.popupVisible = false 
 this.data.privinceName = this.addressProvince 
 this.data.cityName = this.addressCity 
 this.data.provinceId = this.addressProvinceId 
 this.data.cityId = this.addressCityId 
 this.data.areaText = this.data.privinceName + this.data.cityName 
 }, 
 infoSave: function () { 
 if (this.data.userName.trim() === '') { 
 Toast('請輸入姓名') 
 } else if (this.data.userName.trim().length > 12) { 
 Toast('姓名不能超過12個(gè)字符') 
 } else if (this.data.sex.toString().trim() === '') { 
 Toast('請選擇性別') 
 } else if (this.data.birthday.trim() === '') { 
 Toast('請選擇出生日期') 
 } else if (this.data.mobile.trim() === '') { 
 Toast('請輸入電話號(hào)碼') 
 } else if (!validators.mobile(this.data.mobile.trim())) { 
 Toast('電話號(hào)碼不正確') 
 } else if (this.data.areaText.toString().trim() === '') { 
 Toast('請選擇所在地區(qū)') 
 } else if (this.data.address.trim() === '') { 
 Toast('請輸入詳細(xì)地址') 
 } else if (this.data.address.trim().length > 50) { 
 Toast('詳細(xì)地址不能超過50個(gè)字符') 
 } else { 
 this.doAdd() 
 } 
 }, 
 doAdd: function () { 
 mineInfoService.updateAccount(this.data).then(res => { 
 Toast('修改成功') 
 this.$router.push('/Mine') 
 }) 
 }, 
 loadMineInfo: function () { 
 mineInfoService.loadMineInfo().then(res => { 
 this.data.photo = res.t.member.photo || '' 
 this.data.userName = res.t.member.userName || '' 
 this.data.sex = res.t.member.sex || '' 
 this.data.sexText = res.t.member.sex === '1' ? '男' : (res.t.member.sex === '0' ? '女' : '') 
 this.data.mobile = res.t.member.mobile || '' 
 this.data.birthday = res.t.member.birthday || '' 
 this.data.area = res.t.member.area || '' 
 this.data.address = res.t.member.address || '' 
 this.dateValue = this.data.birthday 
 this.data.privinceName = res.t.member.priviceName || '' 
 this.data.cityName = res.t.member.cityName || '' 
 this.data.provinceId = res.t.member.provinceId || '' 
 this.data.cityId = res.t.member.cityId || '' 
 this.data.areaText = this.data.privinceName + this.data.cityName 
 }) 
 }, 
 onCityChange: function (picker, values) { 
 this.areaPicker = picker 
 /* 此處不直接使用this.data.privinceName、this.data.cityName、this.data.provinceId、this.data.cityId，由于在加載地區(qū)信息之后，我又重新設(shè)置了綁定到slots屬性的值，此時(shí)也會(huì)觸發(fā)@change事件，所以在nCityChange方法里需要用四個(gè)變量替代上述四個(gè)變量來記錄當(dāng)前選中的值，然后在點(diǎn)擊確定之后的方法里將這四個(gè)值賦給上述四個(gè)變量。如果直接在該方法里使用上述四個(gè)變量來獲取當(dāng)前選中的值，可能導(dǎo)致數(shù)據(jù)錯(cuò)亂 */ 
 picker.setSlotValues(1, address[values[0]]) 
 this.addressProvince = values[0] 
 this.addressCity = values[1] 
 this.addressProvinceId = provinceCodeList[this.addressProvince] + '' 
 this.addressCityId = cityCodeList[this.addressCity] + '' 
 }, 
 open: function (picker) { 
 this.dateValue = this.data.birthday 
 this.$refs[picker].open() 
 }, 
 handleChange: function (value) { 
 this.data.birthday = window.moment(value).format('YYYY-MM-DD') 
 }, 
 selectMan: function () { 
 this.data.sex = '1' 
 this.data.sexText = '男' 
 }, 
 selectWoman: function () { 
 this.data.sex = '0' 
 this.data.sexText = '女' 
 } 
 } 
} 
 
let address = {} 
let provinceCodeList = {} 
let cityCodeList = {} 
</script> 
<style scoped> 
.mint-popup-4 { 
 width: 100%; 
} 
.mint-popup-4 .picker-slot-wrapper, .page-popup .mint-popup-4 .picker-item { 
 -webkit-backface-visibility: hidden; 
 backface-visibility: hidden; 
} 
</style> 

{ 
 "code": 200, 
 "msg": "獲取區(qū)域信息成功！", 
 "t": { 
 "areaList": [ 
 { 
 "上海": [ 
 "上海" 
 ], 
 "北京": [ 
 "北京" 
 ], 
 "廣東": [ 
 "廣州", 
 "深圳" 
 ], 
 "江蘇": [ 
 "徐州", 
 "南京" 
 ], 
 "福建": [ 
 "福州" 
 ] 
 } 
 ], 
 "provinceCodeList": [ 
 { 
 "上海": [ 
 "120001" 
 ], 
 "北京": [ 
 "110001" 
 ], 
 "廣東": [ 
 "130001" 
 ], 
 "江蘇": [ 
 "130007" 
 ], 
 "福建": [ 
 "0100" 
 ] 
 } 
 ], 
 "cityCodeList": [ 
 { 
 "上海": [ 
 "120002" 
 ], 
 "北京": [ 
 "110002" 
 ], 
 "廣州": [ 
 "130002" 
 ], 
 "南京": [ 
 "130006" 
 ], 
 "深圳": [ 
 "518000" 
 ], 
 "福州": [ 
 "0200" 
 ], 
 "徐州": [ 
 "130009" 
 ] 
 } 
 ] 
 } 
}