javascript - vue에서 구성 요소 자체의 높이를 얻는 방법

Question

가변 높이의 팝업 상자를 만들려면 팝업 상자가 아래쪽이나 상단에 나타날 수 있지만 내용이 가변적이므로 높이를 계산해야 표시됩니다. 팝업되든 아래로 나오든 상관없이 현재 구성 요소에서 높이를 가져오는 방법
현재 접근 방식은 created()에서 classname을 사용하여 구성 요소의 p를 가져오는 것입니다. 그러나 초기 값은 data( )에 있으므로 구성 요소의 높이는 기본적으로 0으로 설정되고 created의 data()에서 높이가 변경됩니다. code>이지만 pcreated()中使用classname得到组件的p但由于初始在data()中将组件高度默认了0,
在created中改变data()를 얻지 못합니다.

만들었습니다() {

으아아아

인쇄 결과 curHeight가 정의되지 않았습니다. 해결 방법을 찾아보세요

Answer 1

element.offsetHeight
// vue에서 실제 DOM을 얻으려면 ref를 사용하세요
// DOM이 렌더링된 후 트리거되는 마운트된 후크에서 호출됩니다

Answer 2

으아악

Answer 3

생성된 후크 dom 노드가 아직 페이지에 삽입되지 않았습니다. 마운트된 후크 함수에서 호출해야 합니다.
그리고 요소의 높이를 얻으려면 dom.clientHeight 또는 dom.getBoundingClientRect().height

를 사용하세요.

Answer 4

@linsmall信 호출할 때 v-if를 사용했기 때문에 true로 설정할 때마다 생성되기 때문에 Created에 넣을 수도 있는데 nextTick에 대해서도 알려주세요. 한번도 사용해본 적이 없는데 먼저 시도해 보세요. 당신의 방식대로.
현재 가장 바깥쪽 레이어 p에는 높이가 없기 때문에 하위 p의 높이를 추가해야만 높이를 얻을 수 있습니다. 이 접근 방식은 단지 절충안일 뿐일 수 있습니다. 요소.

this.$nextTick(() => {

으아악

// console.log(cur);

으아악

// console.log(typeof item.clientHeight);

으아악

더 나은 답변이 없으면 귀하의 답변을 수락하겠습니다

Answer 5

실제 크기인 .clientWidth 및 .clientHeight를 가져옵니다.
.height와 같은 획득 방법이 없으므로 정의되지 않습니다