cip-components/main/framework/left.vue

<template>
  <div class="main-framework--left">
    <aside class="main-framework--left__aside main-framework__aside" :class="{'is-collapse':collapse}">
      <div class="main-framework--left__name main-framework__name" :class="{'is-collapse':collapse}">
        <slot name="name" :is-collapse="collapse"></slot>
      </div>
      <div class="main-framework--left__aside__nav" :class="{'is-expanded': hideAsideSwitch}">
        <el-scrollbar :key="collapse">
          <slot name="nav" :is-collapse="collapse"></slot>
        </el-scrollbar>
      </div>
      <div class="main-framework--left__aside__switch main-framework__aside__switch" v-if="!hideAsideSwitch">
        <i @click="toggleCollapse" class="fold-icon">
          <Component :is="collapse? 'UnFold': 'Fold'"></Component>
        </i>
      </div>
    </aside>
    <div class="main-framework--left__content">
      <header class="main-framework--left__header main-framework__header">
        <div><slot name="breadcrumb"></slot></div>
        <slot name="header"></slot>
      </header>
      <div style="display: flex; flex-direction: column;flex-grow:2;height:0;">
        <div class="main-framework--left__tabs" v-show="withTabs === true">
          <slot name="tabs"></slot>
        </div>
        <!--        <div class="main-framework__breadcrumb">-->
        <!--          <slot name="breadcrumb"></slot>-->
        <!--        </div>-->
        <main class="main-framework--left__main main-framework__main">
          <slot></slot>
        </main>
      </div>
      <footer class="main-framework--left__footer main-framework__footer" v-if="!hideFooter">
        <slot name="footer"></slot>
      </footer>
    </div>
  </div>
</template>
<script>
import { ref, defineComponent, onMounted, onBeforeUnmount, computed } from 'vue'
import { ElScrollbar } from 'element-plus'
import { isEmpty } from '@cip/utils/util'
import { UnFold, Fold } from './icons-vue'
export default defineComponent({
  name: 'MainFrameworkLeft',
  components: { ElScrollbar, UnFold, Fold },
  props: {
    hideFooter: Boolean,
    layout: String,
    withTabs: Boolean,
    hideAsideSwitch: Boolean
  },
  setup () {
    const localCollapse = localStorage.getItem('isCollapse')
    const isCollapse = ref(localCollapse ? JSON.parse(localCollapse) : undefined)
    const toggleCollapse = () => {
      isCollapse.value = !collapse.value
      localStorage.setItem('isCollapse', isCollapse.value)
      window.removeEventListener('resize', autoAdaptation)
    }
    const autoCollapse = ref(false)
    const collapse = computed(() => {
      return isCollapse.value ?? autoCollapse.value
    })
    const autoAdaptation = () => {
      if (window.innerWidth <= 1400) {
        autoCollapse.value = true
      } else {
        autoCollapse.value = false
      }
    }
    onMounted(() => {
      if (isEmpty(isCollapse.value)) {
        autoAdaptation()
        window.addEventListener('resize', autoAdaptation)
      }
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize', autoAdaptation)
    })
    return {
      collapse,
      toggleCollapse
    }
  }
})
</script>
<style lang="less">
@footerHeight: 52px;
@sideWidth: 240px;
.main-framework--left{
  width: 100%;
  height: 100%;
  display: flex;
  &__aside{
    width: @sideWidth;
    flex-shrink: 0;
    height: 100%;
    transition: width 0.2s;
    &.is-collapse{
      width: 64px; // el-menu collapse的宽度
    }
    &__nav{
      height: calc(100% - var(--main-framework-header-height, 52px) - @footerHeight);
      box-sizing: border-box;
      &.is-expanded {
        padding-bottom: 16px;
        height: calc(100% - var(--main-framework-header-height, 52px));
      }
    }
    &__switch{
      height: @footerHeight;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fold-icon{
      //color: #fff;
      font-size: 24px;
      cursor: pointer;
    }
  }
  &__name{
    width: 100%;
    height: var(--main-framework-header-height, 52px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 20px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
    z-index:1;
    &.is-collapse{
      padding: 0 8px;
      justify-content: center;
      overflow: hidden;
      width: 64px; // el-menu collapse的宽度
    }
  }
  &__header{
    height: var(--main-framework-header-height, 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    position: relative;
    z-index: 200;
  }
  &__main{
    width: 100%;
    height: 0;
    flex-grow: 2;
    box-sizing: border-box;
    //padding-top: 22px;
    overflow: auto;
  }
  &__tabs{
    flex-shrink: 0;
    padding: 0;
    //height: 52px;
    box-sizing: border-box;
  }
  //&__breadcrumb{
  //  position: absolute;
  //  top: var(--main-framework-header-height, 52px);
  //  left: 0;
  //  right:0;
  //  background: #fff;
  //  z-index: 9;
  //}
  &__footer{
    height: @footerHeight;
  }
  &__content{
    position: relative;
    flex-grow: 2;
    width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
</style>