111 lines
2.4 KiB
Vue
111 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div class="content">
|
||
|
|
<div class="content-left left-slot" :class="{'left-slot-shrink':isShrink}">
|
||
|
|
<slot name="content-left"></slot>
|
||
|
|
<div @click="toggleStat" class="bottom-icon">
|
||
|
|
<div class="bottom-divider"></div>
|
||
|
|
<div style="display: inline-block;float: right"><i style="font-size: 16px;" :class="{'el-icon-d-arrow-right':isShrink,'el-icon-d-arrow-left':!isShrink}"></i></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
|
||
|
|
<slot name="content-right" ></slot>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "leftMenu",
|
||
|
|
props:{
|
||
|
|
resizeFunc:{type:Function}
|
||
|
|
},
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
isShrink:false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
toggleStat:function(){
|
||
|
|
this.isShrink=!this.isShrink;
|
||
|
|
this.$store.commit('setLeftMenuStat',this.isShrink);
|
||
|
|
if(this.resizeFunc){
|
||
|
|
this.resizeFunc();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.isShrink=this.$store.state.leftMenuStat ;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.content{
|
||
|
|
height: 100%;
|
||
|
|
position:relative;
|
||
|
|
}
|
||
|
|
.slot-content{
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.content .left-slot{
|
||
|
|
position: relative;
|
||
|
|
/*border-bottom: 1px solid #eeeeee;*/
|
||
|
|
/*transition: all 100ms;*/
|
||
|
|
}
|
||
|
|
.content .right-slot{
|
||
|
|
margin-left: unset !important;
|
||
|
|
width: calc(100% - 210px);
|
||
|
|
float: right;
|
||
|
|
}
|
||
|
|
.content .left-slot-shrink{
|
||
|
|
width: 25px;
|
||
|
|
padding: 0px;
|
||
|
|
.bottom-icon{
|
||
|
|
margin-left: 5px;
|
||
|
|
}
|
||
|
|
.bottom-icon .bottom-divider{
|
||
|
|
width: 0px;
|
||
|
|
}
|
||
|
|
.slot-content{
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.content .right-slot-open{
|
||
|
|
width:calc(100% - 35px);
|
||
|
|
}
|
||
|
|
.left-slot .bottom-icon{
|
||
|
|
position:absolute;
|
||
|
|
bottom: 15px;
|
||
|
|
left: 0px;
|
||
|
|
}
|
||
|
|
.left-slot .bottom-icon:hover{
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.bottom-icon .bottom-divider{
|
||
|
|
display: inline-block;
|
||
|
|
height: 1px;
|
||
|
|
width: 175px;
|
||
|
|
border-top: 1px solid lightgrey;
|
||
|
|
vertical-align: middle;
|
||
|
|
}
|
||
|
|
.content .left-slot-shrink:hover{
|
||
|
|
width: 200px;
|
||
|
|
padding: 0px 0px 0px 15px;
|
||
|
|
position: absolute;
|
||
|
|
background-color: #FFF;
|
||
|
|
z-index: 100;
|
||
|
|
.slot-content{
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
.bottom-icon{
|
||
|
|
z-index: 101;
|
||
|
|
}
|
||
|
|
.bottom-icon .bottom-divider{
|
||
|
|
width: 175px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
|
||
|
|
</style>
|