<template>
|
<el-tabs ref="tabsRef">
|
<el-tab-pane label="静安夜间施工管理">
|
<JingAnNightConstruction></JingAnNightConstruction>
|
</el-tab-pane>
|
<el-tab-pane label="静安工地扬尘设备信息匹配">
|
<NewDevice></NewDevice>
|
</el-tab-pane>
|
<el-tab-pane label="新工地">
|
<NewConstruction></NewConstruction>
|
</el-tab-pane>
|
</el-tabs>
|
</template>
|
<script setup>
|
import { ref, onMounted, provide, computed } from 'vue';
|
import NewDevice from './NewDevice.vue';
|
import NewConstruction from './NewConstruction.vue';
|
import JingAnNightConstruction from './JingAnNightConstruction.vue';
|
|
// 定义 tabs ref
|
const tabsRef = ref(null);
|
const tabsHeaderHeight = ref(0);
|
|
onMounted(() => {
|
// 确保 DOM 已经渲染完成
|
setTimeout(() => {
|
tabsHeaderHeight.value = getTabsHeaderHeight();
|
}, 0);
|
});
|
|
function getTabsHeaderHeight() {
|
if (tabsRef.value) {
|
// 获取 el-tabs 组件的 DOM 元素
|
const tabsElement = tabsRef.value.$el;
|
|
// Element UI 的 el-tabs header 通常有 .el-tabs__header 类名
|
const headerElement = tabsElement.querySelector('.el-tabs__header');
|
|
if (headerElement) {
|
// 获取 header 的 offsetHeight（包含 padding 和 border，不包含 margin）
|
const offsetHeight = headerElement.offsetHeight;
|
|
// 获取计算样式以获取 margin 值
|
const computedStyle = window.getComputedStyle(headerElement);
|
|
// 解析 margin 值（上下左右）
|
const marginTop = parseFloat(computedStyle.marginTop || 0);
|
const marginBottom = parseFloat(computedStyle.marginBottom || 0);
|
// const marginLeft = parseFloat(computedStyle.marginLeft || 0);
|
// const marginRight = parseFloat(computedStyle.marginRight || 0);
|
|
// 计算总高度（包含所有 padding、border 和 margin）
|
const totalHeightWithMargin = offsetHeight + marginTop + marginBottom;
|
|
return totalHeightWithMargin;
|
}
|
}
|
return 0;
|
}
|
|
provide('tabsHeaderHeight', computed(() => tabsHeaderHeight.value));
|
</script>
|
<style scoped></style>
|
