| | |
| | | <template> |
| | | <el-menu |
| | | default-active="scene" |
| | | ellipsis |
| | | mode="horizontal" |
| | | style="max-width: 600px" |
| | | > |
| | | <el-menu-item |
| | | v-for="item in menu" |
| | | :key="item.path" |
| | | :index="item.path" |
| | | @click="navPage" |
| | | >{{ item.name }}</el-menu-item |
| | | <el-affix> |
| | | <el-menu |
| | | ref="menuRef" |
| | | default-active="scene" |
| | | ellipsis |
| | | mode="horizontal" |
| | | > |
| | | </el-menu> |
| | | <router-view v-slot="{ Component, route }"> |
| | | <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" |
| | |
| | | </router-view> |
| | | </template> |
| | | <script setup> |
| | | import { ref, onMounted } from 'vue'; |
| | | import { ref, onMounted, provide, inject, computed } from 'vue'; |
| | | import { useRouter, useRoute } from 'vue-router'; |
| | | |
| | | const contentMaxHeight = inject('contentMaxHeight'); |
| | | |
| | | const router = useRouter(); |
| | | const route = useRoute(); |
| | | |
| | | const menuRef = ref(null); |
| | | const height = ref(contentMaxHeight.value); |
| | | |
| | | const menu = ref([ |
| | | { |
| | |
| | | path: 'evaluate' |
| | | }, |
| | | { |
| | | name: '巡查信息', |
| | | name: '整改清单', |
| | | path: 'inspection' |
| | | }, |
| | | { |
| | |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | 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> |