vue学习之mintui picker选择器实现省市二级联动示例
时间:2019-04-07
本文章向大家介绍vue学习之mintui picker选择器实现省市二级联动示例,主要包括vue学习之mintui picker选择器实现省市二级联动示例使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文介绍了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" ] } ] } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- BZOJ 2793: [Poi2012]Vouchers(调和级数)
- 3891: [Usaco2014 Dec]Piggy Back
- Java8-如何构建一个Stream
- 2016: [Usaco2010]Chocolate Eating
- javascript 闭包详解
- 3016: [Usaco2012 Nov]Clumsy Cows
- POJ 3207 Ikki's Story IV - Panda's Trick(2-SAT)
- 3359: [Usaco2004 Jan]矩形
- 漫谈Java IO之 Netty与NIO服务器
- Java线程的几种状态
- POJ3683 Priest John's Busiest Day(2-SAT)
- javascript 面向对象(实现继承的几种方式)
- Base64 的 JavaScript 实现 js-base64
- HTTP请求详解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 栈论 : 递归与栈式访问,如何用栈实现所有递归操作(幼儿园题目篇,题目3)
- Maven是什么? Maven的概念+作用+仓库的介绍+常用命令
- JDK8;HashMap:再散列解决hash冲突 ,源码分析和分析思路
- 写一个 Singleton
- 树莓派基础实验31:MPU6050陀螺仪加速度传感器实验
- springboot gradle mybatis mysql配置(注解)
- PHP入门之流程控制
- 常用进制转换方法(取商留余)原理解析, 附基于栈实现进制转换的代码
- 用 jdom 解析 xml 文件时如何解决中文问题?如何解析?
- PHP入门之函数
- spring boot 启动报错 org/springframework/core/ErrorCoded
- PHP入门之数组
- PHP基础之排序
- 关于mysql limit offset的一点优化
- PHP基础之查找