<template>
|
<el-aside>
|
<!-- <el-button
|
type="default"
|
:icon="collapse ? 'ArrowRightBold' : 'ArrowLeftBold'"
|
circle
|
size="small"
|
class="toggle-btn"
|
@click="collapse = !collapse"
|
>
|
</el-button> -->
|
<el-scrollbar>
|
<!-- 标题 -->
|
<el-row ref="headerRef" class="header" align="center" justify="start">
|
<el-space>
|
<el-image :src="appIcon" style="width: 40px; height: 40px" />
|
<span v-show="!collapse">{{ title }}</span>
|
</el-space>
|
</el-row>
|
<!-- <el-scrollbar :height="menuHeight"> -->
|
<el-menu
|
:default-active="homePage"
|
active-text-color="#ffd04b"
|
background-color="#545c64"
|
text-color="#fff"
|
:collapse="collapse"
|
@open="handleOpen"
|
@close="handleClose"
|
router
|
>
|
<MenuItems :routes="menus" @navPage="navPage"> </MenuItems>
|
</el-menu>
|
<!-- </el-scrollbar> -->
|
<!-- 商标 -->
|
<el-row ref="subTitleRef" class="sub-title" justify="center">
|
<el-space>{{ collapse ? '' : subTitle }}</el-space>
|
</el-row>
|
</el-scrollbar>
|
</el-aside>
|
</template>
|
|
<script>
|
import { MENU } from '@/constants/index'
|
import AppIcon from '@/assets/app-icon.png'
|
|
export default {
|
props: {
|
collapse: {
|
type: Boolean,
|
default: false,
|
},
|
},
|
emits: ['navPage'],
|
data() {
|
return {
|
// collapse: false,
|
menuHeight: '80vh',
|
title: '油烟智能一体化平台',
|
subTitle: '©上海飞羽环保科技有限公司',
|
appIcon: AppIcon,
|
}
|
},
|
computed: {
|
homePage() {
|
const paths = this.menuPath(this.menus[0])
|
return paths[paths.length - 1].path
|
},
|
menus() {
|
return MENU()
|
},
|
},
|
methods: {
|
handleOpen() {},
|
handleClose() {},
|
navPage(...item) {
|
const titles = item.map((value) => {
|
return value.name
|
})
|
this.$emit('navPage', titles)
|
},
|
calMenuHeight() {
|
const h1 = this.$refs.headerRef?.$el.offsetHeight || 0
|
// const h2 = this.$refs.header2Ref.$el.offsetHeight
|
const h2 = 0
|
const h3 = this.$refs.subTitleRef?.$el.offsetHeight || 0
|
return `calc(100vh - ${h1}px - ${h2}px - ${h3}px)`
|
},
|
menuPath(m) {
|
function getFirstMenu(menu) {
|
if (menu.children) {
|
return [menu, ...getFirstMenu(menu.children[0])]
|
} else {
|
return [menu]
|
}
|
}
|
return getFirstMenu(m)
|
},
|
},
|
created() {
|
this.$router.push(this.homePage)
|
this.navPage(...this.menuPath(this.menus[0]))
|
},
|
mounted() {
|
this.menuHeight = this.calMenuHeight()
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.el-aside {
|
--background-color: #545c64;
|
position: relative;
|
background-color: var(--background-color);
|
width: initial;
|
// overflow: hidden;
|
}
|
.el-menu {
|
// background-color: rgb(41,45,62);
|
// background-color: rgb(50, 155, 185);
|
// width: 200px;
|
margin-bottom: 60px;
|
border-right: none;
|
}
|
.toggle-btn {
|
position: absolute;
|
z-index: 10 !important;
|
right: 0;
|
top: 50%;
|
margin-top: -12px;
|
}
|
.header {
|
position: sticky;
|
top: 0;
|
color: white;
|
background-color: var(--background-color);
|
padding: 10px;
|
/* margin-bottom: 10px; */
|
// box-shadow: 0 0.2rem 0.2rem 0 #42484e;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
// position: absolute;
|
z-index: 2;
|
}
|
|
.title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.sub-title {
|
// background-color: aqua;
|
width: 200px;
|
position: fixed;
|
left: 0;
|
// right: 0;
|
bottom: 0px;
|
color: white;
|
background-color: var(--background-color);
|
// line-height: 40px;
|
font-size: 12px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
.el-icon {
|
font-size: 22px !important;
|
}
|
</style>
|
