<template>
<div style="height: calc(100vh); overflow: hidden">
<el-container style="height: 100%; overflow: hidden">
<el-aside width="auto">
<el-menu
:default-active="defaultActive"
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
style="height: 100%"
router
>
<div class="el-menu-box">
<div
class="logo-image"
style="width: 18px; height: 18px; background-size: 18px 18px"
></div>
<div style="padding-left: 5px; padding-top: 7px">
OverallAuth2.0
</div>
</div>
<div v-for="menuItem in menu" :key="">
<el-sub-menu
v-if=" && "
:index=""
:key=""
>
<template #title>
<el-icon><location /></el-icon>{{ }}</template
>
<el-menu-item
v-for="subMenuItem in "
:index=""
:route="{ name: }"
:key=""
@click="menuItemClick(subMenuItem)"
style="cursor: pointer"
>
{{ }}
</el-menu-item>
</el-sub-menu>
<el-menu-item
v-else
:index=""
:key=""
:route="{ name: }"
@click="menuItemClick(menuItem)"
style="cursor: pointer"
>
{{ }}
</el-menu-item>
</div>
</el-menu>
</el-aside>
<el-container>
<el-header class="headerCss">
<div style="display: flex; height: 100%; align-items: center">
<div
style="
text-align: left;
width: 50%;
font-size: 18px;
display: flex;
"
>
<div class="logo-image" style="width: 32px; height: 32px"></div>
<div style="padding-left: 10px; padding-top: 7px">
OverallAuth2.0 privilege management system
</div>
</div>
<div
style="
text-align: right;
width: 50%;
display: flex;
justify-content: right;
cursor: pointer;
"
>
<div
class="user-image"
style="width: 22px; height: 22px; background-size: 22px 22px"
></div>
<div style="padding-left: 5px; padding-top: 3px">
WeChat: Not Just Coders
</div>
</div>
</div>
</el-header>
<el-main>
<el-tabs
v-if=" > 0"
v-model="defaultActive"
class="demo-tabs"
@click="tabsClick(defaultActive)"
@tab-remove="tabRemoveClick"
>
<el-tab-pane
v-for="item in tabsList"
:label=""
:name=""
:key=""
:closable=" == '/panel' ? false : true"
style="font-size: 16px"
>
<router-view></router-view>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import router, { routes } from "../router/module/base-routes";
import { RouteRecordRaw } from "vue-router";
export default defineComponent({
setup() {
const defaultActive = ref("/panel");
const menu = routes;
const tabsList = ref<RouteRecordRaw[]>([]);
//Initial loading of dom
onMounted(() => {
(routes[0]); //The first tab opens by default
(routes[0]);
});
//Menu item click event
function menuItemClick(subMenuItem: RouteRecordRaw) {
// Append if not present in tabList
if (!((sub) => == )) {
(subMenuItem);
}
= ;
}
//Menu tab click event
const tabsClick = (item: string) => {
= item;
({ path: item });
};
//Menu tab removal event
const tabRemoveClick = (path: any) => {
((item: { path: string }, index: any) => {
if ( == path) (index, 1); //index index of the current element; 1: number of elements to be deleted
});
= "/panel";
({ path: "/panel" });
};
return {
menu,
tabsList,
defaultActive,
tabsClick,
tabRemoveClick,
menuItemClick,
};
},
components: {},
});
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
width: 200px;
min-height: 400px;
}
.el-menu-box {
display: flex;
padding-left: 25px;
align-items: center;
height: 57px;
box-shadow: 0 1px 4px #00152914;
border: 1px solid #00152914;
color: white;
}
.el-main {
padding-top: 0px;
padding-left: 1px;
padding-right: 1px;
margin: 0;
}
.headerCss {
font-size: 12px;
border: 1px solid #00152914;
box-shadow: 0 1px 4px #00152914;
justify-content: right;
align-items: center;
/* display: flex; */
}
.logo-image {
background-image: url("... /components/privilege-assignment.png");
}
.user-image {
background-image: url("... /components/user.png");
}
.demo-tabs /deep/ .el-tabs__header {
color: #333; /* Tab header font color*/
margin: 0 0 5px !important;
}
.demo-tabs /deep/ .el-tabs__nav-wrap {
padding-left: 10px;
}
</style>