vue学习之mintui picker选择器实现省市二级联动示例
2020-11-27
来源：独旅网
本文介绍了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
代码如下：
<!-- 页面模版 -->
<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>
地区数据格式如下：
{
"code": 200,
"msg": "获取区域信息成功！",
"t": {
"areaList": [
{
"上海": [
"上海"
],
"北京": [
"北京"
],
"广东": [
"广州",
"深圳"
],
"江苏": [
"徐州",
"南京"
],
"福建": [
"福州"
]
}
],
"provinceCodeList": [
{
"上海": [
"120001"
],
"北京": [
"110001"
],
"广东": [
"130001"
],
"江苏": [
"130007"
],
"福建": [
"0100"
]
}
],
"cityCodeList": [
{
"上海": [
"120002"
],
"北京": [
"110002"
],
"广州": [
"130002"
],
"南京": [
"130006"
],
"深圳": [
"518000"
],
"福州": [
"0200"
],
"徐州": [
"130009"
]
}
]
}
}