vant-ui Address Edit 주소 편집 과 van-area 의 용법 설명

주소 편집 주소 편집
1.vant-ui 주소 편집 에 설정 되 어 있 습 니 다:area-list="area List",모든 성 시내 의 데 이 터 를 초기 화 합 니 다.
이것 은 vant-ui 팝 업 층 과 결합 하여 사용 하 는 것 입 니 다.팝 업 층 으로 시내 에서 선택 한 구성 요 소 를 감 싼 다음 필요 에 따라 공식 문 서 를 참조 하여 관련 설정 을 하고 기본 아래쪽 팝 업 을 합 니 다.
중요 한 것 은 정부 가 구체 적 으로 어떻게 사용 하 는 지 설명 하지 않 았 기 때문에 여기 서 성 시내 의 제 이 슨 데 이 터 를 받 아야 한 다 는 것 이다.그 중에서 area.js 파일 은 공식 적 으로 다운로드 할 수 있 고 assets/js/area.js 에 놓 은 다음 에 파일 을 도입 하면 됩 니 다.

다음 과 같다.

<template>
 <div>
 <van-nav-bar title="    " left-text="  " left-arrow @click-left="onClickLeft"/>
 <van-address-edit
 :area-list="areaList"
 show-postal
 show-delete
 show-set-default
 show-search-result
 :search-result="searchResult"
 @save="onSave"
 @delete="onDelete"
 @change-detail="onChangeDetail"
 />
 </div>
</template>

<script>
import areaList from "../assets/js/area.js";
import { Toast } from "vant";
export default {
 name: "Address",
 data() {
 return {
 areaList,
 searchResult: []
 };
 },
 methods: {
 onClickLeft() {
 this.$router.push("/my");
 },
 onSave() {
 this.$router.push("/my");
 },
 onDelete() {
 Toast("delete");
 this.$router.push("/my");
 },
 onChangeDetail(val) {
 if (val) {
 this.searchResult = [
  {
  name: "    ",
  address: "      "
  }
 ];
 } else {
 this.searchResult = [];
 }
 }
 }
};
</script>

<style scoped>
</style>

vue 모 바 일 주소 편집 주소 표시
이 글 을 쓰 는 것 은 주로 앞에서 이 주 소 를 쓸 때 구 덩이 를 만 나 많은 시행 착 오 를 겪 었 다 는 것 이다.여기에 기록 하여 초보 친구 들 에 게 가 리 켰 다.
이것 은 원 도 를 편집 하 는 것 이다.

프로젝트 원본
처음에 저 는 vant ui 프레임 워 크 를 사 용 했 습 니 다.주소 에 있어 서 vant 는 잘 사용 되 었 습 니 다.주소 목록 은 시내 선택 구성 요 소 를 모두 사 용 했 습 니 다.
처음에는 문제 가 없 었 습 니 다.몇 번 의 버 전 업 데 이 트 를 거 친 후에 어떤 페이지 가 vant 주소 선택 구성 요소 와 충돌 하여 성 시 내 를 선택 할 때 탄 상자 에 공백 이 생 겼 습 니 다.몇 번 의 시 도 를 겪 은 후에 저 는 muse 성 시내 선택 구성 요 소 를 바 꾸 는 것 을 포 기 했 습 니 다.그러나 주소 가 표시 되 었 을 때 백 엔 드 가 도시 인 코딩 으로 돌아 가지 못 했 습 니 다.어 쩔 수 없 이 마지막 에 vux 를 사 용 했 습 니 다.
vuex 의 구성 요 소 를 사용 하면 또 약간의 번 거 로 움 을 만 날 수 있 습 니 다.저 는 주소 목록 에서 주소 정 보 를 전달 한 다음 에 created 에서 받 아들 이 고 구성 요소 에 직접 값 을 부여 합 니 다.이 때 페이지 주소 선택 부분 화이트 보드 가 우리 가 원 하 는 리 턴 효과 에 이 르 지 못 한 것 을 발 견 했 습 니 다.뒤에 연 구 를 해 봤 는데 우리 가 created 에서 직접 값 을 부여 해서 실제 페이지 가 렌 더 링 되 기 전에 페이지 가 렌 더 링 전의 내용 을 표시 할 수 없 기 때 문 입 니 다.다음은 제 해결 방법 입 니 다.
created 시 구성 요소 에 직접 값 을 부여 할 수 없습니다.methods 에서 방법 0.1s 를 쓴 후에 값 을 부여 합 니 다.1s 는 페이지 렌 더 링 이 완료 되 었 습 니 다.페이지 렌 더 링 이 끝나 면 보조 적 으로 표시 할 수 있 습 니 다.


완벽 한 해결!
이상 의 이 vant-ui Address Edit 주소 편집 과 van-area 의 용법 설명 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 께 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.