|
|
@@ -4,14 +4,28 @@ export default {
|
|
|
name: "adminLayout",
|
|
|
props: {
|
|
|
headerHeight: {
|
|
|
- default: 35
|
|
|
+ default: '35px'
|
|
|
},
|
|
|
sideBarWidth: {
|
|
|
- default: 270
|
|
|
+ default: '270px'
|
|
|
},
|
|
|
sideBarHeight: {
|
|
|
- default: 35
|
|
|
+ default: '35px'
|
|
|
},
|
|
|
+ bgColor: {default: '#fff'},
|
|
|
+ sideBarColor: {default: '#bebebe'},
|
|
|
+ headerBgColor: {default: '#086fb6'},
|
|
|
+ // 文本颜色, 主要文本颜色 次要文本颜色
|
|
|
+ textColor: {default: '#333'},
|
|
|
+ mainTextColor: {default: '#333'},
|
|
|
+ textColorHover: {default: '#fff'},
|
|
|
+ mainTextColorHover: {default: '#fff'},
|
|
|
+
|
|
|
+ btnColor: {default: '#086fb6'},
|
|
|
+ btnColorHover: {default: '#086fb6'},
|
|
|
+ btnTextColor: {default: '#fff'},
|
|
|
+ btnTextColorHover: {default: '#fff'},
|
|
|
+
|
|
|
sidebarMenus: {
|
|
|
default(){
|
|
|
return []
|
|
|
@@ -33,44 +47,75 @@ export default {
|
|
|
},
|
|
|
userName: {
|
|
|
default: ''
|
|
|
- }
|
|
|
+ },
|
|
|
+ btnLink: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ activeKey: {
|
|
|
+ default: ''
|
|
|
+ },
|
|
|
},
|
|
|
data(){
|
|
|
return {
|
|
|
isShowSideBar: true,
|
|
|
- headerStyle: '',
|
|
|
- boxStyle: '',
|
|
|
- sideBarStyle: '',
|
|
|
- conStyle: '',
|
|
|
+ cssText: '',
|
|
|
+ sideMenus: [],
|
|
|
}
|
|
|
},
|
|
|
beforeMount() {
|
|
|
this.init_computedStyle();
|
|
|
},
|
|
|
+ watch:{
|
|
|
+ sidebarMenus(){
|
|
|
+ this.init_comSideBar();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.init_comSideBar();
|
|
|
+ },
|
|
|
methods:{
|
|
|
- /**
|
|
|
- * 计算dom元素样式
|
|
|
- */
|
|
|
- init_computedStyle(){
|
|
|
- let headerStyle= ``,
|
|
|
- boxStyle = ``,
|
|
|
- sideBarStyle = ``,
|
|
|
- conStyle = ``;
|
|
|
- let nextSideBarWidth = this.isShowSideBar?this.sideBarWidth:this.sideBarHeight;
|
|
|
- headerStyle+=`height:${this.headerHeight}px`;
|
|
|
- boxStyle += `height:calc(100% - ${this.headerHeight}px);` ;
|
|
|
- sideBarStyle += `width:${nextSideBarWidth}px;`;
|
|
|
- conStyle += `width:calc(100% - ${nextSideBarWidth}px);` ;
|
|
|
- this.headerHeight = headerStyle;
|
|
|
- this.boxStyle = boxStyle;
|
|
|
- this.sideBarStyle = sideBarStyle;
|
|
|
- this.conStyle = conStyle;
|
|
|
+ init_comSideBar(){
|
|
|
+ // 循环遍历菜单
|
|
|
+ this.sideMenus = this.sidebarMenus.map((item)=>{
|
|
|
+ let newItem = {...item};
|
|
|
+ newItem.isShow = false;
|
|
|
+ return newItem;
|
|
|
+ });
|
|
|
},
|
|
|
switchHandle(){
|
|
|
if(!this.interactSideBar){return console.log('不允许交互sidebar');}
|
|
|
this.isShowSideBar = !this.isShowSideBar;
|
|
|
this.init_computedStyle();
|
|
|
- }
|
|
|
+ },
|
|
|
+
|
|
|
+ switchSideBarMenuHandle(item){
|
|
|
+ item.isShow = !item.isShow;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 计算dom元素样式
|
|
|
+ */
|
|
|
+ init_computedStyle(){
|
|
|
+ let cssText = `
|
|
|
+ --headerHeight: ${this.headerHeight};
|
|
|
+ --sideBarWidth: ${this.isShowSideBar?this.sideBarWidth:this.sideBarHeight};
|
|
|
+ --baseSideBarWidth: ${this.sideBarWidth};
|
|
|
+ --sideBarHeight: ${this.sideBarHeight};
|
|
|
+ --bg-color: ${this.bgColor};
|
|
|
+ --sideBarBgColor: ${this.sideBarColor};
|
|
|
+ --header-color: ${this.headerBgColor};
|
|
|
+ --text-color: ${this.textColor};
|
|
|
+ --main-text-color: ${this.mainTextColor};
|
|
|
+ --text-color-hover: ${this.textColorHover};
|
|
|
+ --main-text-color-hover: ${this.mainTextColorHover};
|
|
|
+ --btn-color: ${this.btnColor};
|
|
|
+ --btn-color-hover: ${this.btnColorHover};
|
|
|
+ --btn-text-color: ${this.btnTextColor};
|
|
|
+ --btn-text-color-hover: ${this.btnTextColorHover};
|
|
|
+ `;
|
|
|
+ this.cssText = cssText;
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -78,9 +123,9 @@ export default {
|
|
|
<template>
|
|
|
<!-- 管理员控制台布局 永久性头部,可伸缩侧边栏-->
|
|
|
|
|
|
-<div class="lay-con">
|
|
|
+<div class="lay-con" :style="cssText">
|
|
|
<!-- 头部横条 -->
|
|
|
- <div class="lay-header" :style="headerHeight" >
|
|
|
+ <div class="lay-header" >
|
|
|
<div class="lay-logo">
|
|
|
<slot name="logo">
|
|
|
<h1>{{logoTitle}}</h1>
|
|
|
@@ -108,13 +153,36 @@ export default {
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 内容部分-->
|
|
|
- <div class="lay-box" :style="boxStyle">
|
|
|
- <div class="lay-sideBar" :style="sideBarStyle">
|
|
|
+ <div class="lay-box" >
|
|
|
+ <div :class="`lay-sideBar ${!isShowSideBar?'lay-sideBar-hide':''}`" >
|
|
|
+<!-- 侧边按钮 -->
|
|
|
<div class="lay-sideBar-control" @click="switchHandle">
|
|
|
- {{isShowSideBar?'⩴':'≯'}}
|
|
|
+ <svg-icon :icon-class="isShowSideBar?'prev':'next'"/>
|
|
|
+ </div>
|
|
|
+<!-- 侧边栏,带标题,icon,下拉菜单-->
|
|
|
+ <div v-for="(item,i) in sideMenus"
|
|
|
+ :key="'sideBar-'+i"
|
|
|
+ :class="`bar-menu-item ${item.isShow?'bar-menu-item-show':''}`"
|
|
|
+ >
|
|
|
+ <div class="menu-title">
|
|
|
+ <span class="icon"> <svg-icon :icon-class="item.icon"/> </span>
|
|
|
+ <span class="text">{{ item.title }}</span>
|
|
|
+ <span class="icon option" @click="switchSideBarMenuHandle(item)">
|
|
|
+ <svg-icon :icon-class="item.isShow?'arrow-up':'arrow-down'"/>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class="sub-menu-box">
|
|
|
+ <div v-for="sub in item.child"
|
|
|
+ :key="sub.key"
|
|
|
+ :class="`menu-item ${activeKey===sub.key?'menu-items-show':''}`"
|
|
|
+ >
|
|
|
+ <span>{{sub.title}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="lay-content" :style="conStyle">
|
|
|
+ <div class="lay-content" >
|
|
|
<slot></slot>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -122,17 +190,37 @@ export default {
|
|
|
</template>
|
|
|
|
|
|
<style scoped>
|
|
|
+
|
|
|
.lay-con {
|
|
|
+ --headerHeight: v-bind(headerHeight);
|
|
|
+ --sideBarWidth: v-bind(sideBarWidth);
|
|
|
+ --sideBarHeight: v-bind(sideBarHeight);
|
|
|
+ --baseSideBarWidth: v-bind(sideBarWidth);
|
|
|
+ --bg-color: v-bind(bgColor);
|
|
|
+ --sideBarBgColor: v-bind(sideBarColor);
|
|
|
+ --header-color: v-bind(headerBgColor);
|
|
|
+ --text-color: v-bind(textColor);
|
|
|
+ --main-text-color: v-bind(mainTextColor);
|
|
|
+ --text-color-hover: v-bind(textColorHover);
|
|
|
+ --main-text-color-hover: v-bind(mainTextColorHover);
|
|
|
+
|
|
|
+ --btn-color: v-bind(btnColor);
|
|
|
+ --btn-color-hover: v-bind(btnColorHover);
|
|
|
+ --btn-text-color: v-bind(btnTextColor);
|
|
|
+ --btn-text-color-hover: v-bind(btnTextColorHover);
|
|
|
+
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
overflow: hidden;
|
|
|
- background-color: #fff;
|
|
|
+ background-color: var(--sideBarBgColor);
|
|
|
position: relative;
|
|
|
+
|
|
|
}
|
|
|
.lay-header{
|
|
|
- background-color: #59aee3;
|
|
|
+ background-color: var(--header-color);
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
+ height: var(--headerHeight);
|
|
|
flex-direction: row;
|
|
|
}
|
|
|
.lay-header > *{
|
|
|
@@ -157,10 +245,12 @@ export default {
|
|
|
padding: 5px 15px;
|
|
|
}
|
|
|
.lay-menus .menus .menu:hover{
|
|
|
- color: #086fb6;
|
|
|
+ color: var(--text-color-hover);
|
|
|
}
|
|
|
+
|
|
|
.lay-box {
|
|
|
width: 100%;
|
|
|
+ height:calc(100% - var(--headerHeight));
|
|
|
display: flex;
|
|
|
}
|
|
|
.lay-box > *{
|
|
|
@@ -169,9 +259,10 @@ export default {
|
|
|
position: relative;
|
|
|
}
|
|
|
.lay-sideBar{
|
|
|
-
|
|
|
+ width: var(--sideBarWidth);
|
|
|
}
|
|
|
.lay-content{
|
|
|
+ width: calc(100% - var(--sideBarWidth));
|
|
|
overflow: hidden;
|
|
|
background-color: #d5d5d5;
|
|
|
}
|
|
|
@@ -188,11 +279,117 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- background-color: #fff;
|
|
|
+ background-color: var(--sideBarBgColor);
|
|
|
}
|
|
|
.lay-sideBar-control:hover{
|
|
|
border-color: #f0ad4e;
|
|
|
background-color: #f0ad4e;
|
|
|
color: #fff;
|
|
|
}
|
|
|
+
|
|
|
+.bar-menu-item{
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.bar-menu-item .menu-title{
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ height: var(--sideBarHeight);
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 5px;
|
|
|
+ padding-right: 5px;
|
|
|
+ cursor: default;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.bar-menu-item .menu-title:hover{
|
|
|
+ color: var(--btn-text-color-hover);
|
|
|
+}
|
|
|
+.bar-menu-item .menu-title .icon{
|
|
|
+ width: var(--sideBarHeight);
|
|
|
+ height: var(--sideBarHeight);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: var(--text-color);
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+.bar-menu-item .menu-title .icon *{
|
|
|
+ color: inherit;
|
|
|
+}
|
|
|
+.bar-menu-item .menu-title .option{
|
|
|
+ cursor: pointer;
|
|
|
+ color: var(--text-color);
|
|
|
+}
|
|
|
+.bar-menu-item .menu-title .option:hover{
|
|
|
+ color: var(--btn-text-color-hover);
|
|
|
+}
|
|
|
+.bar-menu-item .menu-title .text{
|
|
|
+ width: calc(100% - var(--sideBarHeight) - var(--sideBarHeight));
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.bar-menu-item .sub-menu-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ transition: height .7s;
|
|
|
+}
|
|
|
+.bar-menu-item .sub-menu-box .menu-item{
|
|
|
+ width: 100%;
|
|
|
+ height: calc(var(--sideBarHeight) - 5px);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: calc(var(--sideBarHeight) + 5px);
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.bar-menu-item .sub-menu-box .menu-item:hover{
|
|
|
+ color: var(--btn-text-color-hover);
|
|
|
+ background-color: var(--btn-color-hover);
|
|
|
+}
|
|
|
+.bar-menu-item-show{
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.bar-menu-item-show .sub-menu-box{
|
|
|
+ height: auto;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.lay-sideBar-hide .lay-sideBar{
|
|
|
+ padding-top: 50px;
|
|
|
+}
|
|
|
+.lay-sideBar-hide .bar-menu-item{
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 10px 0;
|
|
|
+ border-top: 1px solid var(--sideBarBgColor);
|
|
|
+}
|
|
|
+.lay-sideBar-hide .bar-menu-item .menu-title {
|
|
|
+ padding-left: 0;
|
|
|
+ padding-right: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.lay-sideBar-hide .bar-menu-item .sub-menu-box{
|
|
|
+ position: absolute;
|
|
|
+ display: none;
|
|
|
+ top: 0;
|
|
|
+ left: 100%;
|
|
|
+ height: auto;
|
|
|
+ width: calc(var(--baseSideBarWidth) - var(--sideBarWidth));
|
|
|
+ padding: 10px 0;
|
|
|
+ box-shadow: 1px 1px 3px darkgray;
|
|
|
+ z-index: 9999;
|
|
|
+ background-color: var(--sideBarBgColor);
|
|
|
+}
|
|
|
+.lay-sideBar-hide .bar-menu-item:hover{
|
|
|
+ border-top: 1px solid var(--bg-color);
|
|
|
+}
|
|
|
+.lay-sideBar-hide .bar-menu-item:hover .sub-menu-box{
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+
|
|
|
</style>
|
