<yt-header
:over-view-url=""
:active-index=""
:active-tenant=""
@changeTenant=""
@handleSelect=""
@logout=""
@onAllMenu=""
@onAllTenant=""
/>
<yt-sidebar :menu-list="" :default-index="" :title="" @handleSelect="" />
<template>
<div class="app-wrapper">
<div class="header">
<yt-header
:over-view-url="overViewUrl"
:active-index="activeIndex"
:active-tenant="activeTenant"
@changeTenant="changeTenant"
@handleSelect="handleHeaderSelect"
@logout="logout"
@onAllMenu="onAllMenu"
@onAllTenant="onAllTenant"
/>
</div>
<div class="main-wrapper">
<div class="sidebar-container">
<yt-sidebar
:menu-list="menuList"
:default-index="defaultIndex"
:title="sidebarTitle"
@handleSelect="handleSelectSidebar"
/>
</div>
<div class="main-container">
<div>Main</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
overViewUrl: "http://www.example.com",
activeIndex: "",
defaultIndex: "",
menuList: [],
sidebarTitle: "",
activeTenant: "",
};
},
methods: {
/**
* 功能: 通过返回的租户列表,可以设置默认租户activeTenant及其他操作
*/
onAllTenant(data) {
console.log("租户列表", data);
},
/**
* 功能:返回当前选中租户信息,供用户自定义操作
*/
changeTenant(data) {
console.log("选中的租户", data);
},
/**
* 功能:退出登录.交由用户自定义操作(删除相关状态:token/cookie)
*/
logout() {
console.log("logout");
},
/**
* 功能: 返回所有菜单数据,用户可设置默认选中头部索引activeIndex及其他操作
*/
onAllMenu(data) {
console.log("返回所有菜单数据", data);
},
/**
* 功能:返回当前选中头部菜单数据,用户可获取并设置侧边栏数据menuList及默认选中侧边栏索引defaultIndex及其他操作
*/
handleHeaderSelect(data) {
console.log("返回当前选中头部菜单数据", data);
},
/**
* 功能:返回当前选中侧边栏数据,供用户自定义操作
*/
handleSelectSidebar(data) {
console.log("返回当前选中侧边栏菜单数据", data);
},
},
};
</script>
<style scoped>
.app-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.main-wrapper {
display: flex;
width: 100%;
position: absolute;
top: 40px;
left: 0;
right: 0;
bottom: 0px;
overflow-y: hidden;
}
.main-container {
flex: 1;
height: 100%;
overflow: auto;
}
</style>