vue学习之mintui picker选择器实现省市二级联动

Mint UI 使用文档：https://mint-ui.github.io/docs/#/zh-cn2



Popup弹出框介绍：https://mint-ui.github.io/docs/#/zh-cn2/popup

Picker选择器介绍：https://mint-ui.github.io/docs/#/zh-cn2/picker

Datetime picker日期选择器介绍：https://mint-ui.github.io/docs/#/zh-cn2/datetime-picker

代码如下：

[html] view
plain copy

<!-- 页面模版 -->

<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">电话号码</span>

</div>

<div class="mint-cell-value">

<div class="mint-cell-value">

<input placeholder="请输入电话号码" 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">所在地区</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">详细地址</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.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('地区数据异常')

}

})

},

choiceArea: function () {

this.popupVisible = true

// 设置默认选中

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个字符')

} else if (this.data.sex.toString().trim() === '') {

Toast('请选择性别')

} else if (this.data.birthday.trim() === '') {

Toast('请选择出生日期')

} else if (this.data.mobile.trim() === '') {

Toast('请输入电话号码')

} else if (!validators.mobile(this.data.mobile.trim())) {

Toast('电话号码不正确')

} else if (this.data.areaText.toString().trim() === '') {

Toast('请选择所在地区')

} else if (this.data.address.trim() === '') {

Toast('请输入详细地址')

} else if (this.data.address.trim().length > 50) {

Toast('详细地址不能超过50个字符')

} 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，由于在加载地区信息之后，我又重新设置了绑定到slots属性的值，此时也会触发@change事件，所以在nCityChange方法里需要用四个变量替代上述四个变量来记录当前选中的值，然后在点击确定之后的方法里将这四个值赋给上述四个变量。如果直接在该方法里使用上述四个变量来获取当前选中的值，可能导致数据错乱 */

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>

地区数据格式如下：

[html] view
plain copy

{

"code": 200,

"msg": "获取区域信息成功！",

"t": {

"areaList": [

{

"上海": [

"上海"

],

"北京": [

"北京"

],

"广东": [

"广州",

"深圳"

],

"江苏": [

"徐州",

"南京"

],

"福建": [

"福州"

]

}

],

"provinceCodeList": [

{

"上海": [

"120001"

],

"北京": [

"110001"

],

"广东": [

"130001"

],

"江苏": [

"130007"

],

"福建": [

"0100"

]

}

],

"cityCodeList": [

{

"上海": [

"120002"

],

"北京": [

"110002"

],

"广州": [

"130002"

],

"南京": [

"130006"

],

"深圳": [

"518000"

],

"福州": [

"0200"

],

"徐州": [

"130009"

]

}

]

}

}