vue学习之mintui picker选择器实现省市二级联动示例
内容摘要
这篇文章主要为大家详细介绍了vue学习之mintui picker选择器实现省市二级联动示例,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
本文介
对此感兴趣的朋友,看看idc笔记做的技术笔记!
本文介
文章正文
这篇文章主要为大家详细介绍了vue学习之mintui picker选择器实现省市二级联动示例,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
本文介绍了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
代码如下:
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 | <code> <!-- 页面模版 --> <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> |
地区数据格式如下:
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | <code> { "code" : 200, "msg" : "获取区域信息成功!" , "t" : { "areaList" : [ { "上海" : [ "上海" ], "北京" : [ "北京" ], "广东" : [ "广州" , "深圳" ], "江苏" : [ "徐州" , "南京" ], "福建" : [ "福州" ] } ], "provinceCodeList" : [ { "上海" : [ "120001" ], "北京" : [ "110001" ], "广东" : [ "130001" ], "江苏" : [ "130007" ], "福建" : [ "0100" ] } ], "cityCodeList" : [ { "上海" : [ "120002" ], "北京" : [ "110002" ], "广州" : [ "130002" ], "南京" : [ "130006" ], "深圳" : [ "518000" ], "福州" : [ "0200" ], "徐州" : [ "130009" ] } ] } } </code> |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持php教程。
注:关于vue学习之mintui picker选择器实现省市二级联动示例的内容就先介绍到这里,更多相关文章的可以留意
代码注释