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


Posted in Javascript onOctober 12, 2017

本文介绍了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" 
        ] 
      } 
    ] 
  } 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js传值 判断
Oct 26 Javascript
Javascript中Eval函数的使用
Mar 23 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
jQuery实用密码强度检测
Mar 02 Javascript
webpack配置的最佳实践分享
Apr 21 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
JQuery扩展对象方法操作示例
Aug 21 jQuery
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
基于es6三点运算符的使用方法(实例讲解)
Oct 12 #Javascript
浅谈JavaScript的innerWidth与innerHeight
Oct 12 #Javascript
原生JS封装animate运动框架的实例
Oct 12 #Javascript
javascript中神奇的 Date对象小结
Oct 12 #Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 #Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
Oct 11 #Javascript
You might like
php UTF-8、Unicode和BOM问题
2010/05/18 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
PHP各种常见经典算法总结【排序、查找、翻转等】
2019/08/05 PHP
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
基于JavaScript实现瀑布流布局(二)
2016/01/26 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
2017/01/24 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
详解React之key的使用和实践
2018/09/29 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
在Python的Flask框架下收发电子邮件的教程
2015/04/21 Python
python通过邮件服务器端口发送邮件的方法
2015/04/30 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
工业学校毕业生自荐书
2014/01/03 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
搞笑征婚广告词
2014/03/17 职场文书
王老吉广告词
2014/03/20 职场文书
管理工程专业求职信
2014/08/10 职场文书
庆国庆活动总结
2014/08/28 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL