场景:dialog 弹框中想要获取里面table的高度,但是直接用 tableRef.value?.$el.offsetHeight 获取无效。
原因:dialog中有个弹框打开的加载动画。需要用监听 opeined 【Dialog 打开动画结束时的回调】等动画加载后然后进行高度获取
一、demo方案
在Vue 3中,您可以使用watch监听dialog组件的opened属性,并在属性变化时执行相应的操作。在watch的回调函数中,您可以使用nextTick确保在下一个DOM更新周期中获取dialog组件加载完毕后的状态。
<template>
<Dialog v-model="dialogVisible" @opened="handleDialogOpened">
<!-- Dialog Content -->
</Dialog>
</template>
<script>
import { ref, watch, nextTick } from 'vue';
export default {
setup() {
const dialogVisible = ref(false);
const handleDialogOpened = () => {
nextTick(() => {
console.log('Dialog加载完毕');
// 在这里执行您想要在Dialog加载完毕后执行的操作
});
};
watch(dialogVisible, (newValue) => {
if (newValue) {
console.log('Dialog打开');
} else {
console.log('Dialog关闭');
}
});
return {
dialogVisible,
handleDialogOpened
};
}
};
</script>
二、完整代码
<Dialog
v-model="dialogVisible"
title="标题"
@opened="handleDialogOpened"
>
<!-- 详情信息 -->
<el-table ref="tableRef" :data="list" border>
<el-table-column label="姓名1" prop="remark1" show-overflow-tooltip />
<el-table-column label="姓名2" prop="remark2" show-overflow-tooltip />
<el-table-column label="姓名3" prop="remark3" show-overflow-tooltip />
</el-table>
</Dialog>
<script>
const dialogTitle = ref<string>('审核') // 弹框标题
/** 弹窗打开 **/
const open = async (params, fileDetailList) => {
console.log('弹框打开', params, fileDetailList)
resetForm()
dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** */
const handleDialogOpened = () => {
nextTick(() => {
console.log('Dialog加载完毕')
// 在这里执行您想要在Dialog加载完毕后执行的操作
handleHeight()
})
}
/** 动态获取高度 */
const handleHeight = () => {
nextTick(() => {
if (tableRef.value?.$el) {
console.log('Table的高度:', tableRef.value?.$el.offsetHeight)
}
const windowHeight = document.documentElement.clientHeight
console.log('当前屏幕高度', windowHeight)
})
}
</script>