<template>
|
<el-affix>
|
<el-menu
|
ref="menuRef"
|
:default-active="menu.length > 0 ? menu[0].path : ''"
|
ellipsis
|
mode="horizontal"
|
>
|
<el-menu-item
|
v-for="item in menu"
|
:key="item.path"
|
:index="item.path"
|
@click="navPage"
|
>{{ item.name }}</el-menu-item
|
>
|
</el-menu>
|
</el-affix>
|
<router-view v-slot="{ Component, route }" :style="{ height: height + 'px' }">
|
<keep-alive>
|
<component
|
v-if="route.meta.keepAlive"
|
:is="Component"
|
:key="route.name"
|
/>
|
</keep-alive>
|
<component v-if="!route.meta.keepAlive" :is="Component" :key="route.name" />
|
</router-view>
|
</template>
|
<script setup>
|
import { ref, onMounted, provide, inject, computed } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
const contentMaxHeight = inject('contentMaxHeight');
|
|
const props = defineProps({
|
menu: {
|
type: Array,
|
default: () => []
|
}
|
})
|
|
const router = useRouter();
|
|
const menuRef = ref(null);
|
const height = ref(contentMaxHeight.value);
|
|
// const menu = ref([
|
// {
|
// name: '场景清单',
|
// path: 'scene',
|
// selected: true
|
// },
|
// {
|
// name: '评估清单',
|
// path: 'evaluate'
|
// },
|
// {
|
// name: '整改清单',
|
// path: 'inspection'
|
// },
|
// {
|
// name: '监测数据',
|
// path: 'monitorData'
|
// }
|
// ]);
|
|
const navPage = (item) => {
|
if (item.index) {
|
router.push({
|
path: item.index
|
});
|
}
|
};
|
|
function calcTableHeight() {
|
const h = menuRef.value.$el.offsetHeight;
|
return contentMaxHeight.value - h;
|
// return `calc(100vh - ${h}px - 60px - var(--el-main-padding) * 2)`;
|
}
|
|
onMounted(() => {
|
height.value = calcTableHeight();
|
});
|
|
// 提供给内部组件视图最大高度
|
provide(
|
'viewHeight',
|
computed(() => height.value)
|
);
|
</script>
|
<style scoped></style>
|
