노드 높이를 얻기 위해 Vue에서 마운트된 후크 기능을 구현하는 방법

이번에는 노드 높이를 얻기 위해 Vue에서 Mounted Hook 기능을 구현하는 방법과 노드 높이를 얻기 위해 Vue에서 Mounted Hook 기능을 구현할 때 주의 사항이 무엇인지 보여드리겠습니다. 살펴보자.

문제 발생

최근 Vue 프로젝트를 개발 중인데 여러 페이지가 페이지 플로어 슬라이딩 컴포넌트를 사용해서 직접 하나로 패키징했는데 버그가 발생했습니다. 즉, 이 offsetTop 을 가져와야 합니다. 그런 다음 페이지가 이 위치로 스크롤되면 position 속성을 고정으로 설정하여 화면에 고정된 상태로 유지합니다. 문제는 마운트된 후크 함수에서 offsetTop을 가져올 때 새 탭에서 페이지를 열 때 잘못된 offsetTop을 가져오지만 현재 페이지를 새로 고칠 때 문제가 없다는 것입니다.

위치 문제

나중에 발견된 문제는 로딩 문제였습니다. Pictures 기본적으로 사진은 비동기식으로 실행되는 GET 요청입니다. 그림 GET보다 빠르므로 탑재된 후크 기능이 실행될 때 이미지가 완전히 로드되지 않고 잘못된 offsetTop을 얻습니다.

Solution

이미지에 ref 속성을 추가하고 해당 컴포넌트에 탑재된 후크 함수에 적어주세요.

this.$refs.img.onload = ()=>{
Bus.$emit('loadImgSuccess')
}

여기 버스는 두 컴포넌트의 이벤트 응답 방식인 EventBus입니다. 이해가 안되거나 관심이 있으시면 여기를 클릭하세요. EventBus.
offsetTop의 구성 요소를 구해야 합니다

Bus.$on('loadImgSuccess', () => {
var offsetTop = this.$refs.dom.offsetTop 
})

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Node.js Buffer 사용에 대한 자세한 설명

webpack+react 개발 환경 구축 방법

위 내용은 노드 높이를 얻기 위해 Vue에서 마운트된 후크 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!