123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188 |
- <template>
- <div class="main-framework--top-left">
- <header class="main-framework--top-left__header main-framework__header">
- <div class="main-framework--top-left__name main-framework__name">
- <slot name="name" :is-collapse="false"></slot>
- </div>
- <div class="main-framework--top__nav"><slot name="headerNav"></slot></div>
- <slot name="header"></slot>
- </header>
- <div class="main-framework--top-left__content">
- <aside class="main-framework--top-left__aside main-framework__aside" :class="{'is-collapse':collapse}">
- <div class="main-framework--top-left__aside__nav">
- <el-scrollbar>
- <slot name="nav" :is-collapse="collapse"></slot>
- </el-scrollbar>
- </div>
- <div class="main-framework--top-left__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="flex-column flex-grow-2">
- <div class="flex-column flex-grow-2" style="height: 0; overflow: auto">
- <div class="main-framework--top-left__tabs" v-show="withTabs === true">
- <slot name="tabs"></slot>
- </div>
- <main class="main-framework__main main-framework--top-left__main">
- <slot></slot>
- </main>
- </div>
- <footer class="main-framework--top-left__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: 'MainFrameworkLeft',
- components: { ElScrollbar },
- props: {
- hideFooter: Boolean,
- layout: String,
- withTabs: 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: 60px;
- @footerHeight: 52px;
- @sideWidth: 240px;
- .main-framework--top-left{
- width: 100%;
- height: 100%;
- display: flex;
- flex-direction: column;
- .flex-row{
- display: flex;
- }
- .flex-column{
- display: flex;
- flex-direction: column;
- }
- .flex-grow-2{
- flex-grow: 2;
- }
- &__aside{
- width: @sideWidth;
- flex-shrink: 0;
- height: 100%;
- transition: width 0.2s;
- &.is-collapse{
- width: 64px; // el-menu collapse的宽度
- }
- &__nav{
- 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: 100%;
- 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;
- &.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{
- // position: absolute;
- // top: @headerHeight;
- // left: 0;
- // right:0;
- // background: #fff;
- // z-index: 9;
- //}
- &__footer{
- height: @footerHeight;
- }
- &__content{
- position: relative;
- flex-grow: 2;
- height: 0;
- width: 100%;
- display: flex;
- //flex-direction: column;
- }
- }
- </style>
|