This article introduces the example of the mintui picker selector for Vue learning to realize the provincial and municipal secondary linkage. It is shared with you, as follows:
Mint UI usage documentation:/docs/#/zh-cn2
Popup popup box introduction:/docs/#/zh-cn2/popup
Picker selector introduction:/docs/#/zh-cn2/picker
Datetime picker date selector introduction:/docs/#/zh-cn2/datetime-picker
The code is as follows:
<!-- Page templates -->
<template>
<div>
<!--header-->
<com-header :title="" :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">avatar</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value"></div>
<img v-bind:src="" :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">Name</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value">
<input placeholder="Please enter your name" type="text" class="mint-field-core text-right" v-model="">
<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">gender</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value is-link" @click="sexVisible = true">
<input placeholder="Please choose gender" type="text" class="mint-field-core text-right" readonly="readonly" v-model="">
<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="Cancel"></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">Date of birth</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value is-link" @click="open('datePicker')">
<input placeholder="Please select a date" type="text" class="mint-field-core text-right" readonly="readonly" v-model="">
<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">telephone number</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value">
<input placeholder="Please enter your phone number" type="text" readonly="readonly" class="mint-field-core text-right gray" v-model="">
<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">Area</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value is-link" @click="choiceArea">
<input placeholder="Please select a province and city" type="text" class="mint-field-core text-right" readonly="readonly" v-model="">
<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">Cancel</span>
<span class="mint-datetime-action mint-datetime-confirm" @click="selectaddress">Sure</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">Detailed address</span>
</div>
<div class="mint-cell-value">
<div class="mint-cell-value">
<input placeholder="Street, building number, etc." type="text" class="mint-field-core text-right" v-model="">
<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">save</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: '="' + require('../assets/') + '"',
headerData: {
title: 'My information',
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: (address),
className: 'slot1',
textAlign: 'center'
}, {
divider: true,
content: '-',
className: 'slot2'
}, {
flex: 1,
values: (address)[0],
className: 'slot3',
textAlign: 'center'
}
],
addressProvince: '',
addressProvinceId: '',
addressCity: '',
addressCityId: '',
dateValue: new Date(),
startDate: new Date('1900-01-01'),
endDate: new Date()
}),
created () {
()
()
},
mounted () {
= [{
name: 'male',
method:
}, {
name: 'female',
method:
}]
},
methods: {
loadAreaList: function () {
().then(res => {
if () {
=
address = [0]
provinceCodeList = [0]
cityCodeList = [0]
[0].values = (address)
[2].values = (address)[0]
} else {
Toast('Regional data exception')
}
})
},
choiceArea: function () {
= true
// Set default selection if ( !== '' && !== '') {
(0, )
(1, )
( + '-' + )
}
},
cancleaddress: function () {
= false
(0, )
(1, )
},
selectaddress: function () {
= false
=
=
=
=
= +
},
infoSave: function () {
if (() === '') {
Toast('Please enter your name')
} else if (().length > 12) {
Toast('The name cannot exceed 12 characters')
} else if (().trim() === '') {
Toast('Please choose gender')
} else if (() === '') {
Toast('Please select a date of birth')
} else if (() === '') {
Toast('Please enter the phone number')
} else if (!(())) {
Toast('The phone number is incorrect')
} else if (().trim() === '') {
Toast('Please select your region')
} else if (() === '') {
Toast('Please enter the detailed address')
} else if (().length > 50) {
Toast('The detailed address cannot exceed 50 characters')
} else {
()
}
},
doAdd: function () {
().then(res => {
Toast('Modification was successful')
this.$('/Mine')
})
},
loadMineInfo: function () {
().then(res => {
= || ''
= || ''
= || ''
= === '1' ? 'male' : ( === '0' ? 'female' : '')
= || ''
= || ''
= || ''
= || ''
=
= || ''
= || ''
= || ''
= || ''
= +
})
},
onCityChange: function (picker, values) {
= picker
/* I am not directly using, ,,,,,, after loading the region information, I reset the value bound to the slots attribute, and the @change event will also be triggered at this time. Therefore, in the nCityChange method, four variables need to be replaced by the above four variables to record the currently selected value, and then assign these four values to the above four variables in the method after clicking OK. If you use the above four variables directly in this method to obtain the currently selected value, it may cause data confusion */
(1, address[values[0]])
= values[0]
= values[1]
= provinceCodeList[] + ''
= cityCodeList[] + ''
},
open: function (picker) {
=
this.$refs[picker].open()
},
handleChange: function (value) {
= (value).format('YYYY-MM-DD')
},
selectMan: function () {
= '1'
= 'male'
},
selectWoman: function () {
= '0'
= 'female'
}
}
}
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>
The region data format is as follows:
{
"code": 200,
"msg": "Getting regional information successfully!",
"t": {
"areaList": [
{
"Shanghai": [
"Shanghai"
],
"Beijing": [
"Beijing"
],
"Guangdong": [
"Guangzhou",
"Shenzhen"
],
"Jiangsu": [
"Xuzhou",
"Nanjing"
],
"Fujian": [
"Fuzhou"
]
}
],
"provinceCodeList": [
{
"Shanghai": [
"120001"
],
"Beijing": [
"110001"
],
"Guangdong": [
"130001"
],
"Jiangsu": [
"130007"
],
"Fujian": [
"0100"
]
}
],
"cityCodeList": [
{
"Shanghai": [
"120002"
],
"Beijing": [
"110002"
],
"Guangzhou": [
"130002"
],
"Nanjing": [
"130006"
],
"Shenzhen": [
"518000"
],
"Fuzhou": [
"0200"
],
"Xuzhou": [
"130009"
]
}
]
}
}
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.