foreword
Since there is a lot of data on the main page of the project, it needs to be displayed across the screen, so the left navigation should be made to be foldable.
The effect is as follows (please ignore the watermark of the gif image T^T):
Move the mouse into the blue button on the left, the navigation slides out slowly from the left, and a mask layer is added to the content on the right; click the mask layer part on the right, the mask layer disappears, and the navigation slides out slowly to the left.
start
Above code:
app.vue
<template>
<div>
<el-container>
<span class="slideIcon" @mouseover="open">
<img src="../../assets/img/icon/leftSlide.svg" alt="" >
</span>
<el-aside
style="width:201px;position:absolute;z-index:9999;"
:class="{'open':!isCollapse}"
ref="leftAside">
<LEFT></LEFT>
</el-aside>
<div class="popContainer"
ref="msk"
v-if="!isCollapse"
@click="closeMenu($event)"></div>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</div>
</template>
<script>
import LEFT from './layout/left.vue'
export default {
name: 'app',
data() {
return {
isCollapse:true
};
},
methods:{
open(){
this.isCollapse = false;
},
closeMenu(ev){
if (this.$refs.msk.contains(ev.target)) {
this.isCollapse = true;
}
}
},
created(){
},
mounted(){
},
components: { LEFT }
};
</script>
<style scoped>
.el-icon{
position: absolute;
top: 70px;
font-size: 20px;
left: 10px;
cursor: pointer;
}
.el-main{
height: 100%!important;
padding:20px 100px;
}
.el-aside{
left:-204px;
transition:left .3s ease-in-out;
}
.open{
left:0;
}
@media screen and (max-width:1440px){
.el-main{
padding:20px 50px;
}
}
.popContainer{
position: fixed;
top: 60px;
left: 0;
right: 0;
bottom: 0;
z-index: 998;
background: rgba(0,0,0,0.2);
transition: opacity 1s ease-in-out 1s;
}
.slideIcon{
padding: 5px 3px;
background-color: #dceffe;
height: 30px;
border-radius: 4px;
position: absolute;
top: 85px;
left: 20px;
border: 1px solid #3a629d;
cursor: pointer;
}
</style>
This can basically be achieved.
The process of solving the problem is recorded here, and some ideas are also given to the friends. Please let me know if there are any imprecise places.