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 相关文章推荐
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
JS事件在IE与FF中的区别详细解析
Nov 20 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
javascript实现简单留言板案例
Feb 09 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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/10/09 PHP
smarty实例教程
2006/11/19 PHP
php相当简单的分页类
2008/10/02 PHP
PHP判断一个字符串是否是回文字符串的方法
2015/03/23 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
载入进度条 效果
2006/07/08 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
angular2使用简单介绍
2016/03/01 Javascript
jQuery遮罩层实例讲解
2017/05/11 jQuery
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
微信小程序如何获取用户收货地址
2018/11/27 Javascript
Vue实现简单分页器
2018/12/29 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Windows下python3.6.4安装教程
2018/07/31 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python反转列表的三种方式解析
2019/11/08 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
大专生自荐信
2013/10/04 职场文书
外贸专业求职信
2014/03/09 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
质量提升方案
2014/06/16 职场文书
干部作风建设心得体会
2014/10/22 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
数学备课组工作总结
2015/08/12 职场文书
一篇文章学会Vue中间件管道
2021/06/20 Vue.js