序文
プロジェクトのメイン ページには大量のデータがあるため、画面全体に表示する必要があるため、左側のナビゲーションを折りたたみ可能にする必要があります。
効果は次のとおりです (GIF 画像の透かしは無視してください T^T):
マウスを左側の青いボタンに移動すると、ナビゲーションが左側からゆっくりとスライドアウトし、右側のコンテンツにマスク レイヤーが追加されます。右側のマスク レイヤー部分をクリックすると、マスク レイヤーが消え、ナビゲーションがスライドアウトします。ゆっくり左へ。
始める
上記のコード:
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>
基本的にはこれで達成可能です。
問題を解決する過程がここに記録され、いくつかのアイデアが友達に与えられます。不正確な箇所がありましたらご指摘ください。