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 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
jquery实现的一个导航滚动效果具体代码
May 27 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
jquery插件方式实现table查询功能的简单实例
Jun 06 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
Feb 22 Javascript
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学习资源和链接.
2006/12/05 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
thinkphp在模型中自动完成session赋值示例代码
2014/09/09 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
jquery uploadify如何取消已上传成功文件
2017/02/08 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
js实现一个页面多个倒计时的3种方法
2019/02/25 Javascript
浅谈Express.js解析Post数据类型的正确姿势
2019/05/30 Javascript
基于javascript实现贪吃蛇经典小游戏
2020/04/10 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
python中的lambda表达式用法详解
2016/06/22 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
用pyqt5 给按钮设置图标和css样式的方法
2019/06/24 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
python匿名函数的使用方法解析
2019/10/10 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
Pytorch 实现focal_loss 多类别和二分类示例
2020/01/14 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python正则表达式学习小例子
2020/03/03 Python
html5基础教程常用技巧整理
2013/08/20 HTML / CSS
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
硅酸盐工业控制专业应届生求职信
2013/11/02 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
村委会贫困证明范文
2014/09/21 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
WinServer2012搭建DNS服务器的方法步骤
2022/06/10 Servers