Vue3 使用ref获取元素

简介

两个视频，第一个已经存在，第二个视频暂时没有，但是需要留好位置，给第二个视频一个盒子，与第一个同高，于是使用ref获取元素

<div class="video-item" ref="videoRef">
    <--封装的视频组件-->
    <VideoPlay :video_url="item.filePath" :title="item.name" />
</div>
<div class="video-item mt-4">
   <div class="video-clip" ref="emptyRef">
        <div class="empty-con"> <span>暂无视频</span></div>
   </div>
</div>

let videoRef = ref<HTMLElement | null>(null);
let emptyRef = ref<HTMLElement[] | null>(null);

function getGuideRecordData() {
     ...
     await nextTick();
     //此处用于获取视频高度，以此作为空白视频的高度
     //使用setTimeout是因为获取元素过早，视频尚未加载完全，所获取的高度不准确
     setTimeout(() => {
        emptyRef.value!.forEach((element) => {
            element.style.height = `${videoRef.value![0].offsetHeight}px`;
        });
     }, 350);
          ...
}

注意：

获取元素时，必须要dom已经加载，否则获取为null，正常情况下在onMounted中即可，但此时因为dom加载时依赖的数据并未获得，所以我将获取元素写在了获取数据的方法里，同时使用nextTick()

因为

DOM 的更新并不是同步的。相反，Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次声明更改，每个组件都只需要更新一次。 若要等待一个状态改变后的 DOM 更新完成，你可以使用 nextTick()