Browse Source

顶栏吸顶 侧边栏收起时不能正常显示的bug修复

main
QM303176530 5 years ago
parent
commit
3023037911
  1. 2
      web/src/view/layout/aside/historyComponent/history.vue
  2. 2
      web/src/view/layout/aside/index.vue
  3. 48
      web/src/view/layout/index.vue

2
web/src/view/layout/aside/historyComponent/history.vue

@ -38,7 +38,7 @@ export default {
const obj = {} const obj = {}
obj.name = route.name obj.name = route.name
obj.meta = route.meta obj.meta = route.meta
this.historys.push(obj)
this.historys.push(obj)
} }
this.activeValue = this.$route.name this.activeValue = this.$route.name
}, },

2
web/src/view/layout/aside/index.vue

@ -2,7 +2,7 @@
<div> <div>
<el-scrollbar style="height:calc(100vh)"> <el-scrollbar style="height:calc(100vh)">
<el-menu <el-menu
:class="['el-menu-vertical',!isCollapse&&'noCollapse']"
class="el-menu-vertical"
:collapse="isCollapse" :collapse="isCollapse"
:collapse-transition="true" :collapse-transition="true"
:default-active="active" :default-active="active"

48
web/src/view/layout/index.vue

@ -7,6 +7,8 @@
</el-aside> </el-aside>
<!-- 分块滑动功能 --> <!-- 分块滑动功能 -->
<el-main class="main-cont main-right"> <el-main class="main-cont main-right">
<transition mode="out-in" name="el-fade-in-linear">
<div class="topfix" :style="{width: `calc(100% - ${isCollapse?'54px':'220px'})`}">
<el-header class="header-cont"> <el-header class="header-cont">
<div @click="totalCollapse" class="menu-total"> <div @click="totalCollapse" class="menu-total">
<i class="el-icon-s-unfold" v-if="isCollapse"></i> <i class="el-icon-s-unfold" v-if="isCollapse"></i>
@ -37,7 +39,26 @@
<el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp"> </el-dropdown-item> <el-dropdown-item @click.native="LoginOut" icon="el-icon-table-lamp"> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<el-dialog
</div>
</el-header>
<!-- 当前面包屑用路由自动生成可根据需求修改 -->
<!--
:to="{ path: item.path }" 暂时注释不用-->
<HistoryComponent />
</div>
</transition>
<transition mode="out-in" name="el-fade-in-linear">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" class="admin-box"></router-view>
</keep-alive>
</transition>
<transition mode="out-in" name="el-fade-in-linear">
<router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
</transition>
</el-main>
</el-container>
<el-dialog
title="修改密码" title="修改密码"
:visible.sync="showPassword" :visible.sync="showPassword"
@close="clearPassword" @close="clearPassword"
@ -59,23 +80,6 @@
<el-button type="primary" @click="savePassword"> </el-button> <el-button type="primary" @click="savePassword"> </el-button>
</div> </div>
</el-dialog> </el-dialog>
</div>
</el-header>
<!-- 当前面包屑用路由自动生成可根据需求修改 -->
<!--
:to="{ path: item.path }" 暂时注释不用-->
<HistoryComponent />
<transition mode="out-in" name="el-fade-in-linear">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" class="admin-box"></router-view>
</keep-alive>
</transition>
<transition mode="out-in" name="el-fade-in-linear">
<router-view v-if="!$route.meta.keepAlive" class="admin-box"></router-view>
</transition>
</el-main>
</el-container>
</el-container> </el-container>
</template> </template>
@ -221,8 +225,15 @@ $mainHight: 100vh;
.dropdown-group { .dropdown-group {
min-width: 100px; min-width: 100px;
} }
.topfix{
position:fixed;
top:0;
box-sizing: border-box;
z-index: 999;
}
.admin-box{ .admin-box{
background-color: rgb(255,255,255); background-color: rgb(255,255,255);
margin-top: 100px;
} }
.el-scrollbar__wrap { .el-scrollbar__wrap {
padding-bottom: 17px; padding-bottom: 17px;
@ -260,7 +271,6 @@ $mainHight: 100vh;
} }
.router-history{ .router-history{
background: #fff; background: #fff;
margin-top: 1px;
padding: 0 6px; padding: 0 6px;
} }
&.el-main { &.el-main {

Loading…
Cancel
Save