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>
 <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"
        ]
      }
    ]
  }
} 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。