Der Mintui-Picker-Selektor in Vue realisiert die Verknüpfung von Provinzen und Städten auf zweiter Ebene

In diesem Artikel wird hauptsächlich das Beispiel des Mintui-Picker-Selektors beim Vue-Lernen vorgestellt, um die Verknüpfung von Provinzen und Städten auf der zweiten Ebene zu realisieren. Ich hoffe, dass es allen helfen kann.

Dieser Artikel stellt das Beispiel der Verwendung des Mintui-Picker-Selektors beim Vue-Lernen vor, um die Verknüpfung von Provinzen und Städten auf der zweiten Ebene zu realisieren. Die Details sind wie folgt:

Dokumentation zur Verwendung der Mint-Benutzeroberfläche: https://mint -ui.github.io/docs/#/zh-cn2

Einführung in die Popup-Popup-Box: https://mint- ui.github.io/docs/#/zh-cn2/popup

Einführung in den Picker-Selektor: https://mint-ui.github.io/docs/#/zh-cn2/picker

Datetime Picker Einführung in den Datetime Picker: https://mint-ui.github.io/docs/#/zh-cn2/datetime-picker

Der Code ist wie folgt folgt:

<!-- 页面模版 --> 
<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>

Das regionale Datenformat ist wie folgt:

{ 
  "code": 200, 
  "msg": "获取区域信息成功！", 
  "t": { 
    "areaList": [ 
      { 
        "上海": [ 
          "上海" 
        ], 
        "北京": [ 
          "北京" 
        ], 
        "广东": [ 
          "广州", 
          "深圳" 
        ], 
        "江苏": [ 
          "徐州", 
          "南京" 
        ], 
        "福建": [ 
          "福州" 
        ] 
      } 
    ], 
    "provinceCodeList": [ 
      { 
        "上海": [ 
          "120001" 
        ], 
        "北京": [ 
          "110001" 
        ], 
        "广东": [ 
          "130001" 
        ], 
        "江苏": [ 
          "130007" 
        ], 
        "福建": [ 
          "0100" 
        ] 
      } 
    ], 
    "cityCodeList": [ 
      { 
        "上海": [ 
          "120002" 
        ], 
        "北京": [ 
          "110002" 
        ], 
        "广州": [ 
          "130002" 
        ], 
        "南京": [ 
          "130006" 
        ], 
        "深圳": [ 
          "518000" 
        ], 
        "福州": [ 
          "0200" 
        ], 
        "徐州": [ 
          "130009" 
        ] 
      } 
    ] 
  } 
}

Verwandte Empfehlungen:

Detaillierte Erklärung der Eigenproduktion von Angular4 Sekundäre Verknüpfungskomponente für Stadt und Landkreis

Ajax kombiniert mit PHP zur Implementierung der sekundären Verknüpfung Kaskadenverknüpfungsinstanzmethode

js implementiert die Auswahl der sekundären Verknüpfungsinstanzfreigabe in HTML

Das obige ist der detaillierte Inhalt vonDer Mintui-Picker-Selektor in Vue realisiert die Verknüpfung von Provinzen und Städten auf zweiter Ebene. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!