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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
简单时间提示DEMO从0开始一直进行计时
Nov 19 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jquery图片切换实例分析
Apr 15 Javascript
详解javascript遍历方式
Nov 11 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
详解layui中的树形关于取值传值问题
Jan 16 Javascript
vue实现底部菜单功能
Jul 24 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
Vue中fragment.js使用方法小结
Feb 17 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 Smarty生成EXCEL文档的代码
2008/08/23 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
JavaScript delete操作符应用实例
2009/01/13 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
jQuery自适应轮播图插件Swiper用法示例
2016/08/24 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
vue iview实现动态新增和删除
2020/06/17 Javascript
vue.js实现双击放大预览功能
2020/06/23 Javascript
React倒计时功能实现代码——解耦通用
2020/09/18 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[02:06]2018完美世界全国高校联赛秋季赛开始报名(附彩蛋)
2018/09/03 DOTA
简单谈谈Python中函数的可变参数
2016/09/02 Python
python按行读取文件,去掉每行的换行符\n的实例
2018/04/19 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
详解python 中in 的 用法
2019/12/12 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
python 多线程中join()的作用
2020/10/29 Python
CSS3中的元素过渡属性transition示例详解
2016/11/30 HTML / CSS
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
三年级学生评语
2014/04/23 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
日本动漫十大公认神作:第五现已全网禁播,《死亡笔记》在榜
2022/03/18 日漫