vant 의 지역 컨트롤 을 사용 하여 모든 옵션 을 추가 합 니 다.

프로젝트 에서 vant 의 Area 플러그 인 을 사 용 했 습 니 다.모든 일치 가 필요 합 니 다.vant 자체 가 실현 되 지 않 았 습 니 다.코드 를 개조 해 야 합 니 다.방법 은 다음 과 같 습 니 다.

<div class="site">
 <span class>  </span>
 <van-cell v-model="start" @click="areaSelect(0)"></van-cell>
</div>
<div class="site">
 <span>  </span>
 <van-cell v-model="end" @click="areaSelect(1)"></van-cell>
</div>
<van-popup v-model="show" position="bottom">
 <van-area :area-list="areaList" @cancel="onCancel" @confirm="onConfirm" @change="change" ref="area" />
</van-popup>

vue 의 methos 에 다음 두 가지 방법 을 추가 합 니 다.

change(picker, value, index){
  if(value[0].code != 100000){

  if(index == 0){
   let addr = this.areaList;
   let areaListCode = value[0].code;
   let code1 = Object.assign({},addr.city_list,{[areaListCode]:"  "});
   let code2 = Object.assign({},addr.county_list,{[areaListCode]:"  "});
   this.areaList.city_list = code1;
   this.areaList.county_list = code2;
  }
  if (index == 1) {
   let addr = this.areaList;
   let areaListCode = value[1].code;
   let code = Object.assign({},addr.county_list,{[areaListCode]: "  "});
   this.areaList.county_list = code;
  }
  }
 },
 areaSelect(type) {
  let addr = this.areaList;
  this.PickerType = type;
  this.show = true;  
  if(this.PickerType == 1 && this.endAddrInfo == "   "){
   this.$refs.area.reset();
  };
  let province_list = Object.assign({},addr.province_list,{100000:"  "});
  let city_list = Object.assign({},addr.city_list,{100100:"  "});
  let county_list = Object.assign({},addr.county_list ,{100101:"  "});
  this.areaList={
  province_list,city_list,county_list
  };
 },

추가 지식:vant 의 Area 성 시내 선택 과 Area 컨트롤 을 사용 합 니 다.3 단 계 를 선택 하지 않 으 면 현재 값 을 선택 할 수 없습니다.
오늘 은 Area 선택 기 를 사용 해서 인터넷 에서 여러 가지 방법 을 찾 아 봤 는데 숨 길 수가 없 었 어 요.
효과 도 는 다음 과 같다.

Area 구성 요 소 는 일반적으로 van-cell 에 맞 춰 사용 합 니 다.

1.페이지 를 불 러 올 때 쇼 를 false 로 합 니 다.


그리고 van-cell 구성 요 소 를 클릭 한 후 area Select 방법 으로 show 를 true 로 바 꾸 면 표시 합 니 다.


그리고 연동 효과 가 있 으 려 면 초기 값 을 줘 야 합 니 다.이 역할 은 area 컨트롤 을 클릭 한 후에 컨트롤 을 꺼 내 는 것 입 니 다.주 소 를 선택 하지 않 고 직접 클릭 하여 확인 하 더 라 도 기본 값 이 있 을 수 있 습 니 다.

재 자 는 원 하 는 값 을 onChange 에 이렇게 써 야 합 니 다.그렇지 않 으 면 3 급(구 현 이 라면)을 터치 하지 않 으 면 새로 고침 하지 않 습 니 다.바로 지난번 에 선 택 된 구 현의 값 입 니 다.처음에 저 는 이렇게 썼 습 니 다.
오류:

정확 한:

이상 의 이 vant 를 사용 한 지역 컨트롤 추가 모든 옵션 은 편집장 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.