hfysite/components/layout/adminLayout.vue

<script>

export default {
  name: "adminLayout",
  props: {
    headerHeight: {
      default: '35px'
    },
    sideBarWidth: {
      default: '270px'
    },
    sideBarHeight: {
      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 []
      }
    },
    interactSideBar: {
      default: true
    },
    logoTitle: {
      default: ''
    },
    headerMenus: {
      default(){
        return []
      }
    },
    headerMenuKey: {
      default: ''
    },
    userName: {
      default: ''
    },
    btnLink: {
      type: Boolean,
      default: false
    },
    activeKey: {
      default: ''
    },
  },
  data(){
    return {
      isShowSideBar: true,
      cssText: '',
      sideMenus: [],
    }
  },
  beforeMount() {
    this.init_computedStyle();
  },
  watch:{
    sidebarMenus(){
      this.init_comSideBar();
    },
  },
  mounted() {
    this.init_comSideBar();
  },
  methods:{
    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>

<template>
<!-- 管理员控制台布局 永久性头部,可伸缩侧边栏-->

<div class="lay-con" :style="cssText">
<!--  头部横条 -->
  <div class="lay-header"  >
    <div class="lay-logo">
      <slot name="logo">
        <h1>{{logoTitle}}</h1>
      </slot>
    </div>
    <div class="lay-menus">
      <div class="menus">
        <span
          v-for="item in headerMenus"
          :key="item.key"
          :class="`menu ${headerMenuKey===item.key?'':''}`"
        >
          <a :href="item.href">{{item.text}}</a>
        </span>
      </div>
      <div class="bell">
        <slot name="bell"> </slot>
      </div>
      <div class="user">
        <slot name="user">
          <span>{{userName}}</span>
        </slot>
      </div>

    </div>
  </div>
<!--  内容部分-->
  <div class="lay-box" >
    <div :class="`lay-sideBar ${!isShowSideBar?'lay-sideBar-hide':''}`" >
<!--      侧边按钮 -->
      <div class="lay-sideBar-control" @click="switchHandle">
        <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" >
      <slot></slot>
    </div>
  </div>
</div>
</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: var(--sideBarBgColor);
  position: relative;

}
.lay-header{
  background-color: var(--header-color);
  display: flex;
  width: 100%;
  height: var(--headerHeight);
  flex-direction: row;
}
.lay-header > *{
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
}
.lay-logo{
  margin-left: 15px;
  margin-right: 15px;
  box-sizing: border-box;
}
.lay-menus{
  justify-content: end;
}
.lay-menus .menus{
  display: flex;
  padding: 0 5px;
}
.lay-menus .menus .menu{
  padding: 5px 15px;
}
.lay-menus .menus .menu:hover{
  color: var(--text-color-hover);
}

.lay-box {
  width: 100%;
  height:calc(100% - var(--headerHeight));
  display: flex;
}
.lay-box > *{
  transition: width .7s;
  height: 100%;
  position: relative;
}
.lay-sideBar{
  width: var(--sideBarWidth);
}
.lay-content{
  width: calc(100% - var(--sideBarWidth));
  overflow: hidden;
  background-color: #d5d5d5;
}
.lay-sideBar-control{
  position: absolute;
  width: 25px;
  height: 25px;
  left: 100%;
  top: 0px;
  border-radius: 3px;
  border: 1px solid black;
  z-index: 999;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  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>