背景:最开始就是正常操作,获取dom高度,对比是否大于固定值,大于就是显示 展开 按钮,否则就不展示,由于dom列表是v-for 出来的,这里的按钮也是在循环列表中,我这里是根据对比高度,增加一个list ,然后给按钮v-show 绑定对应的值
const heightList = ref([]);
const getIsShowBtn = () => {
for (let i = 0; i < versionList.value.length; i++) {
const height = document.getElementsByClassName("allCard")[i].offsetHeight;
if (height > 400) {
heightList.value[i] = true;
} else {
heightList.value[i] = false;
}
}
};
<el-button
v-show="heightList[index]"
class="extendBtn"
type="primary"
@click="extendContent(index)"
>展开</el-button>
问题:这个时候,我是在onMounted里面调用的getIsShowBtn() ,但是这个时候我要拿到的dom 还没有挂载完毕,所以这个时候是没生效的,然后使用了延时,但使用延时正常使用是没问题的,不知道是否是巧合,当清除缓存时,这里获取到的dom 就不准确了,少了部分图片的高度,猜测这里是图片链接还没加载完成。这里也使用过nextTick 也没有作用
解决:使用 ResizeObserver 来监听 dom 的变化,变化一次就调用一次 getIsShowBtn 这样拿到的就是最新的高度,继而就是准确的高度
const ro = new ResizeObserver((entries) => {
//监听的dom变化了就执行这里的,再次获取对比值
entries.forEach((entry) => {
getIsShowBtn();
});
});
//获取版本数据列表
const versionList = ref([]);
const getVersionList = async () => {
const res = await getVersionListApi();
versionList.value = res;
//这里是先等数据拿到再进行监听dom
await updateMassage();
};
onMounted(async () => {
getVersionList();
});
const updateMassage = () => {
nextTick(() => {
//监听dom高度变化
ro.observe(
document.getElementsByClassName("allCard")[versionList.value.length - 1]
);
});
};
onUnmounted(() => {
// 在组件销毁前取消观察
if (ro) {
ro.disconnect();
}
});
最后实现最终效果