🔨 重构了标签全屏的逻辑

This commit is contained in:
sakuya 2021-11-20 22:01:15 +08:00
parent b7902f7b77
commit c7c39aff03
3 changed files with 19 additions and 5 deletions

View File

@ -17,7 +17,7 @@
<li @click="closeTabs()" :class="contextMenuItem.meta.affix?'disabled':''"><el-icon><el-icon-close/></el-icon></li>
<li @click="closeOtherTabs()"><el-icon><el-icon-folder-delete/></el-icon></li>
<hr>
<li @click="screen()"><el-icon><el-icon-full-screen/></el-icon></li>
<li @click="maximize()"><el-icon><el-icon-full-screen/></el-icon></li>
<li @click="openWindow()"><el-icon><el-icon-copy-document/></el-icon></li>
</ul>
</transition>
@ -195,8 +195,8 @@
})
this.contextMenuVisible = false
},
//TAB
screen(){
//TAB
maximize(){
var nowTag = this.contextMenuItem;
this.contextMenuVisible = false
//
@ -206,8 +206,7 @@
query: nowTag.query
})
}
var element = document.getElementById('adminui-main')
this.$TOOL.screen(element)
document.getElementById('app').classList.add('main-maximize')
},
//
openWindow(){

View File

@ -165,6 +165,8 @@
</section>
</template>
<div class="main-maximize-exit" @click="exitMaximize"><el-icon><el-icon-close /></el-icon></div>
<div class="layout-setting" @click="openSetting"><el-icon><el-icon-brush-filled /></el-icon></div>
<el-drawer title="布局实时演示" v-model="settingDialog" :size="400" append-to-body destroy-on-close>
@ -281,6 +283,10 @@
newMap.push(item)
})
return newMap;
},
//退
exitMaximize(){
document.getElementById('app').classList.remove('main-maximize')
}
}
}

View File

@ -93,3 +93,12 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
.adminui-tags li.sortable-ghost {opacity: 0;}
.adminui-main {overflow: auto;background-color: #f6f8f9;flex: 1;}
/*页面最大化*/
.aminui.main-maximize {
.main-maximize-exit {display: block;}
.aminui-side-split, .aminui-side, .adminui-header, .adminui-topbar, .adminui-tags {display: none;}
}
.main-maximize-exit {display: none;position: fixed;z-index: 3000;top:-20px;left:50%;margin-left: -20px;border-radius: 50%;width: 40px;height: 40px;cursor: pointer;background: rgba(0,0,0,0.2);text-align: center;}
.main-maximize-exit i {font-size: 14px;margin-top: 22px;color: #fff;}
.main-maximize-exit:hover {background: rgba(0,0,0,0.4);}