cip-components/main/framework/left-2.vue

<template>
  <div class="main-framework--left-2">
    <header class="main-framework--left-2__header main-framework__header">
      <div style="display: flex; align-items: center">
<!--        :class="{'is-collapse':collapse}"left-2 不需要收缩-->
        <div class="main-framework--left-2__name main-framework__name" >
          <slot name="name" :is-collapse="false"></slot>
        </div>

      </div>
      <div style="flex: 1;display: flex;justify-content: space-between;align-items: center;">
        <div style="flex:1;width: 0;overflow: hidden;"><slot name="header-body"></slot></div>
        <slot name="header"></slot>
      </div>
    </header>
    <div class="main-framework--left-2__xx">
      <aside class="main-framework--left-2__aside main-framework__aside" :class="{'is-collapse':collapse}" v-if="!hideAside">
        <div class="main-framework--left-2__aside__nav">
          <el-scrollbar>
            <slot name="nav" :is-collapse="collapse"></slot>
          </el-scrollbar>
        </div>
        <div class="main-framework--left-2__aside__switch main-framework__aside__switch">
          <i @click="toggleCollapse" :class="collapse ? 'el-icon-s-unfold': 'el-icon-s-fold'" class="fold-icon"/>
        </div>
      </aside>
      <div class="main-framework--left-2__content">
        <div style="display: flex; flex-direction: column;flex-grow:2;height:0;">
<!--          <div class="main-framework&#45;&#45;left-2__breadcrumb"><slot name="breadcrumb"></slot></div>-->
          <div class="main-framework--left-2__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-2__main main-framework__main">
            <slot></slot>
          </main>
        </div>
        <footer class="main-framework--left-2__footer main-framework__footer" v-if="!hideFooter">
          <slot name="footer"></slot>
        </footer>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, defineComponent, onMounted, onBeforeUnmount, computed } from 'vue'
import { ElScrollbar } from 'element-plus'
import { isEmpty } from '@cip/utils/util'
export default defineComponent({
  name: 'MainFrameworkLeft2',
  components: { ElScrollbar },
  props: {
    hideFooter: Boolean,
    layout: String,
    withTabs: Boolean,
    hideAside: 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">
@headerHeight: 52px;
@footerHeight: 52px;
@sideWidth: 256px;
.main-framework--left-2{
  width: 100%;
  height: 100%;
  overflow: hidden;
  //display: flex;
  &__xx{
    height: calc(100% - @headerHeight);
    display: flex;
  }
  &__aside{
    width: @sideWidth;
    flex-shrink: 0;
    height: 100%;
    transition: width 0.2s;
    &.is-collapse{
      width: 64px; // el-menu collapse的宽度
    }
    &__nav{
      padding-top: 16px;
      box-sizing: border-box;
      height: calc(100%  - @footerHeight);
    }
    &__switch{
      height: @footerHeight;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .fold-icon{
      //color: #fff;
      font-size: 24px;
      cursor: pointer;
    }
  }
  &__name{
    width: @sideWidth;
    height: @headerHeight;
    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;
    flex-shrink: 0;
    &.is-collapse{
      padding: 0 8px;
      justify-content: center;
      overflow: hidden;
      width: 64px; // el-menu collapse的宽度
    }
  }
  &__header{
    height: @headerHeight;
    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 20px;
    //height: 52px;
    box-sizing: border-box;
  }
  &__breadcrumb{
    height: 42px;
    display: flex;
    align-items: center;
  }
  //&__breadcrumb{
  //  position: absolute;
  //  top: @headerHeight;
  //  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>