Map.vue 바 이 두 맵 구성 요소 재 구성 노트 공유

Map.vue 는 iview 구성 요 소 를 위 한 바 이 두 지 도 를 기반 으로 한 구성 요소 로 상자 안에 있 는 지 여 부 를 판단 하고 다각형 커버 물 을 그 리 며 사용자 정의 부 텍스트 표기 물 을 추가 하 는 등 기능 을 실현 합 니 다.
첫 번 째 단계:사용자 정의 부 텍스트 대상 을 재 구성 하여 전역 대상 으로 설정 합 니 다.
원래 코드 의 부 텍스트 대상 은 addResource 라 는 방법 에 설명 되 어 있 습 니 다.코드 구조 가 매우 복잡 합 니 다.beforeCreate 라 는 갈고리 함수 에서 전체 국면 으로 설명 하면 여러 번 재 활용 할 수 있 습 니 다.중복 성명 이 필요 없습니다.그렇지 않 으 면 매번 paintPolygon 방법 을 호출 할 때마다 다시 한 번 설명 해 야 합 니 다.매우 번 거 롭 고 효율 이 너무 낮 습 니 다.
원본 코드 는 부모 구성 요소 에서 이 부 텍스트 대상 이 필요 로 하 는 데 이 터 를 처리 한 다음 에 이 데 이 터 를 부 텍스트 대상 의 구조 함수 에 전달 하고 재 구성 하 는 처리 방식 으로 전체 데이터 대상(data 대상)을 대상 의 구조 함수 에 전달 한 다음 에 수요 에 따라 data 대상 을 분해 하여 대상 의 속성 을 설명 하 는 것 입 니 다(this.content | this._point | this._color 등).요약 하면 데 이 터 는 항상 가장 가 까 운 곳 에서 처리 해 야 합 니 다.

window.ResOverlay = function(data, fun){ 
 this._data = data
 this._content = data['type'].name + "|" + data['name']
 this._point = new BMap.Point(data.coord[0], data.coord[1])
 this._fun = e => {
  fun(data)
  if(typeof(e.preventDefault()) == 'function'){
   e.preventDefault() // IE            
  }else{
   e.stopPropagation() // chrome            
  }
 }
 this._color = data['type'].color || "#5cadff" //              ，     #5cadff。
} 

STEP 2:함수 전달
부 텍스트 에 컴퓨터 엔 드 의 click 이벤트 와 모 바 일 엔 드 의 touch start 이 벤트 를 추가 해 야 합 니 다.부모 구성 요소 의 data 데 이 터 를 조작 하려 면 함수 fun 을 매개 변수 로 입력 하 십시오.
부모 구성 요소 가 데 이 터 를 되 돌려 달라 고 요청 합 니 다.rep.data.data.resources 는 data 이 고 fun 은 data=>{}입 니 다.

 this.$http.get('/api/search').then(rep => {
  this.$refs.main.addResource(rep.data.data.resources, data => {
   this.resourceName = data["name"]
   this.resourceType = data["type"].name
   this.resourceUpdata = data["uploader"]
   this.resourcePosition = data["coord"]
   console.log(data["attachment"])

   let allList = []    
   data["attachment"].map(i => {
    let tempList = []     
    tempList.push(i)     
    tempList.push(i.split("/")[i.split("/").length - 1])
    allList.push(tempList)
   })

   this.resourceDetial = allList

   //        
   for(let i=0; i<data["images"].length; i++){
    this.resourceImage.push(data["images"][i])
   }
   if (data["images"].length > 0){
    this.isExistImage = true
   }else{
    this.isExistImage = false
   }

   //            
   if (data["attachment"].length > 0){
    this.isExistAttach = true
   }else{
    this.isExistAttach = false
   }

   //          
   this.modal1 = true
  })
 })

구조 함수 에서 이렇게 처리 합 니 다.

this._fun = e => {
 fun(data)
 if(typeof(e.preventDefault()) == 'function'){
  e.preventDefault() // IE            
 }else{
  e.stopPropagation() // chrome            
 }
}

마지막 으로 적당 한 위치 에 이벤트 추가

 wrapDiv.addEventListener("touchstart", this._fun);
 wrapDiv.addEventListener("click", this._fun);

본 고 는 이미《Vue.js 전단 구성 요소 학습 튜 토리 얼》로 정리 되 었 으 니,여러분 의 학습 과 독 서 를 환영 합 니 다.
vue.js 구성 요소 에 대한 튜 토리 얼 은 주제vue.js 구성 요소 학습 강좌를 클릭 하여 학습 하 십시오.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.