vue学习之mintui 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" 
        ] 
      } 
    ] 
  } 
}