首页 > js教程 > 正文

vue中mintui picker选择器实现省市二级联动

原创 2018-05-18 16:11:48 0 123
赞助会员专享特权
本文主要介绍了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> 
 <p> 
  <!--header--> 
  <com-header :title="headerData.title" :toLink="headerData.toLink"></com-header> 
  <!--header end--> 
  <!--container--> 
  <p class="ybb-yuyue"> 
   <p class="yy-item-box mine-me"> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">头像</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value"></p> 
       <img v-bind:src="data.photo" :onerror="headImg" class="img-box5"> 
      </p> 
     </p> 
    </a> 
   </p> 
   <p class="yy-item-box mine-me"> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">姓名</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value"> 
        <input placeholder="请输入姓名" type="text" class="mint-field-core text-right" v-model="data.userName"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
     </p> 
    </a> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">性别</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p 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"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
      <i class="mint-cell-allow-right"></i> 
      <mt-actionsheet :actions="sexs" v-model="sexVisible" cancel-text="取消"></mt-actionsheet> 
     </p> 
    </a> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">出生日期</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p 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"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
      <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> 
     </p> 
    </a> 
   </p> 
   <p class="yy-item-box mine-me"> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">电话号码</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value"> 
        <input placeholder="请输入电话号码" type="text" readonly="readonly" class="mint-field-core text-right gray" v-model="data.mobile"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
     </p> 
    </a> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">所在地区</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value is-link" @click="choiceArea"> 
        <input placeholder="请选择省市" type="text" class="mint-field-core text-right" readonly="readonly" v-model="data.areaText"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
      <i class="mint-cell-allow-right"></i> 
      <mt-popup v-model="popupVisible" position="bottom" class="mint-popup-4"> 
       <p 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> 
       </p> 
       <mt-picker :slots="citySlots" @change="onCityChange" :visible-item-count="3"></mt-picker> 
      </mt-popup> 
     </p> 
    </a> 
    <a class="mint-cell mint-field"> 
     <p class="mint-cell-left"></p> 
     <p class="mint-cell-wrapper"> 
      <p class="mint-cell-title"> 
       <span class="mint-cell-text">详细地址</span> 
      </p> 
      <p class="mint-cell-value"> 
       <p class="mint-cell-value"> 
        <input placeholder="街道、楼牌号等" type="text" class="mint-field-core text-right" v-model="data.address"> 
        <p class="mint-field-clear" style="display: none;"><i class="mintui mintui-field-error"></i></p> 
       </p> 
      </p> 
     </p> 
    </a> 
   </p> 
  </p> 
  <p 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> 
  </p> 
  <!--container end--> 
 </p> 
</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' 
   }, { 
    pider: 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" 
        ] 
      } 
    ] 
  } 
}

相关推荐:

Angular4自制一个市县二级联动组件详解

Ajax结合php实现二级联动实例方法

js实现HTML中Select二级联动实例分享

以上就是vue中mintui picker选择器实现省市二级联动的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:picker mintui 选择器
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节