cari

Rumah >hujung hadapan web >tutorial js >vue中mintui picker选择器实现省市二级联动

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

小云云
小云云asal
2018-05-18 16:11:483826semak imbas

本文主要介绍了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(&#39;datePicker&#39;)"> 
        <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 &#39;mint-ui&#39; 
import validators from &#39;../utils/validators&#39; 
import comHeader from &#39;components/comHeader&#39; 
import mineInfoService from &#39;SERVICES/mineInfoService&#39; 
 
export default { 
 components: { 
  comHeader 
 }, 
 data: () => ({ 
  headImg: &#39;this.src="&#39; + require(&#39;../assets/img.png&#39;) + &#39;"&#39;, 
  headerData: { 
   title: &#39;我的资料&#39;, 
   toLink: &#39;/Mine&#39; 
  }, 
  popupVisible: false, 
  sexVisible: false, 
  areaPicker: &#39;&#39;, 
  areaList: [], 
  data: { 
   photo: &#39;&#39;, 
   userName: &#39;&#39;, 
   sex: &#39;&#39;, 
   sexText: &#39;&#39;, 
   mobile: &#39;&#39;, 
   birthday: &#39;&#39;, 
   privinceName: &#39;&#39;, 
   provinceId: &#39;&#39;, 
   cityName: &#39;&#39;, 
   cityId: &#39;&#39;, 
   address: &#39;&#39;, 
   areaText: &#39;&#39; 
  }, 
  sexs: [], 
  citySlots: [ 
   { 
    flex: 1, 
    values: Object.keys(address), 
    className: &#39;slot1&#39;, 
    textAlign: &#39;center&#39; 
   }, { 
    pider: true, 
    content: &#39;-&#39;, 
    className: &#39;slot2&#39; 
   }, { 
    flex: 1, 
    values: Object.values(address)[0], 
    className: &#39;slot3&#39;, 
    textAlign: &#39;center&#39; 
   } 
  ], 
  addressProvince: &#39;&#39;, 
  addressProvinceId: &#39;&#39;, 
  addressCity: &#39;&#39;, 
  addressCityId: &#39;&#39;, 
  dateValue: new Date(), 
  startDate: new Date(&#39;1900-01-01&#39;), 
  endDate: new Date() 
 }), 
 created () { 
  this.loadMineInfo() 
  this.loadAreaList() 
 }, 
 mounted () { 
  this.sexs = [{ 
   name: &#39;男&#39;, 
   method: this.selectMan 
  }, { 
   name: &#39;女&#39;, 
   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(&#39;地区数据异常&#39;) 
    } 
   }) 
  }, 
  choiceArea: function () { 
   this.popupVisible = true 
   // 设置默认选中 
   if (this.data.privinceName !== &#39;&#39; && this.data.cityName !== &#39;&#39;) { 
    this.areaPicker.setSlotValue(0, this.data.privinceName) 
    this.areaPicker.setSlotValue(1, this.data.cityName) 
    console.log(this.data.privinceName + &#39;-&#39; + 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() === &#39;&#39;) { 
    Toast(&#39;请输入姓名&#39;) 
   } else if (this.data.userName.trim().length > 12) { 
    Toast(&#39;姓名不能超过12个字符&#39;) 
   } else if (this.data.sex.toString().trim() === &#39;&#39;) { 
    Toast(&#39;请选择性别&#39;) 
   } else if (this.data.birthday.trim() === &#39;&#39;) { 
    Toast(&#39;请选择出生日期&#39;) 
   } else if (this.data.mobile.trim() === &#39;&#39;) { 
    Toast(&#39;请输入电话号码&#39;) 
   } else if (!validators.mobile(this.data.mobile.trim())) { 
    Toast(&#39;电话号码不正确&#39;) 
   } else if (this.data.areaText.toString().trim() === &#39;&#39;) { 
    Toast(&#39;请选择所在地区&#39;) 
   } else if (this.data.address.trim() === &#39;&#39;) { 
    Toast(&#39;请输入详细地址&#39;) 
   } else if (this.data.address.trim().length > 50) { 
    Toast(&#39;详细地址不能超过50个字符&#39;) 
   } else { 
    this.doAdd() 
   } 
  }, 
  doAdd: function () { 
   mineInfoService.updateAccount(this.data).then(res => { 
    Toast(&#39;修改成功&#39;) 
    this.$router.push(&#39;/Mine&#39;) 
   }) 
  }, 
  loadMineInfo: function () { 
   mineInfoService.loadMineInfo().then(res => { 
    this.data.photo = res.t.member.photo || &#39;&#39; 
    this.data.userName = res.t.member.userName || &#39;&#39; 
    this.data.sex = res.t.member.sex || &#39;&#39; 
    this.data.sexText = res.t.member.sex === &#39;1&#39; ? &#39;男&#39; : (res.t.member.sex === &#39;0&#39; ? &#39;女&#39; : &#39;&#39;) 
    this.data.mobile = res.t.member.mobile || &#39;&#39; 
    this.data.birthday = res.t.member.birthday || &#39;&#39; 
    this.data.area = res.t.member.area || &#39;&#39; 
    this.data.address = res.t.member.address || &#39;&#39; 
    this.dateValue = this.data.birthday 
    this.data.privinceName = res.t.member.priviceName || &#39;&#39; 
    this.data.cityName = res.t.member.cityName || &#39;&#39; 
    this.data.provinceId = res.t.member.provinceId || &#39;&#39; 
    this.data.cityId = res.t.member.cityId || &#39;&#39; 
    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] + &#39;&#39; 
   this.addressCityId = cityCodeList[this.addressCity] + &#39;&#39; 
  }, 
  open: function (picker) { 
   this.dateValue = this.data.birthday 
   this.$refs[picker].open() 
  }, 
  handleChange: function (value) { 
   this.data.birthday = window.moment(value).format(&#39;YYYY-MM-DD&#39;) 
  }, 
  selectMan: function () { 
   this.data.sex = &#39;1&#39; 
   this.data.sexText = &#39;男&#39; 
  }, 
  selectWoman: function () { 
   this.data.sex = &#39;0&#39; 
   this.data.sexText = &#39;女&#39; 
  } 
 } 
} 
 
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二级联动实例分享

Atas ialah kandungan terperinci vue中mintui picker选择器实现省市二级联动. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：原生js封装ajax兼容jsonp实例分享Artikel seterusnya：jQuery中DOM节点操作方法总结

Artikel berkaitan

Lihat lagi