lostecho/vue-element-plus-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 🎸 重构layout-classic布局

Browse Source
This commit is contained in:
chenkl
2020-12-17 17:01:13 +08:00
parent 7ede02141e
commit 29d9c98860
11 changed files with 270 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/index/layout/index.vue
View File

@@ -5,18 +5,18 @@
</template>
<script lang="ts">
import Classic from './modules/Classic.vue'
import Top from './modules/Top.vue'
import LeftTop from './modules/LeftTop.vue'
// import Classic from './modules/Classic.vue'
// import Top from './modules/Top.vue'
// import LeftTop from './modules/LeftTop.vue'
import Test from './modules/Test.vue'
import { defineComponent, ref } from 'vue'
import config from '_p/index/config'
export default defineComponent({
name: 'Layout',
components: {
Classic,
Top,
LeftTop,
// Classic,
// Top,
// LeftTop,
Test
},
setup() {

165
src/pages/index/layout/modules/Test.vue
View File

@@ -16,31 +16,40 @@
<el-scrollbar
class="main__wrap--content"
:class="{
'main__wrap--navFixed': fixedNavbar
'main__wrap--fixed--all': fixedHeader && showNavbar && showTags,
'main__wrap--fixed--nav': fixedHeader && showNavbar && !showTags,
'main__wrap--fixed--tags': fixedHeader && !showNavbar && showTags
}"
>
<div
v-if="showNavbar"
class="navbar__wrap"
class="header__wrap"
:class="{
'navbar__wrap--fixed': fixedNavbar,
'navbar__wrap--collapsed': fixedNavbar && collapsed
'header__wrap--fixed': fixedHeader,
'header__wrap--collapsed': fixedHeader && collapsed
}"
>
<hamburger
v-if="showHamburger"
:collapsed="collapsed"
class="hover-container"
@toggleClick="setCollapsed"
/>
<breadcrumb v-if="showBreadcrumb" />
<div v-if="showScreenfull || showUserInfo" class="navbar__wrap--right">
<screenfull v-if="showScreenfull" class="hover-container screenfull-container" />
<user-info v-if="showUserInfo" class="hover-container user-container" />
<div
v-if="showNavbar"
class="navbar__wrap"
>
<hamburger
v-if="showHamburger"
:collapsed="collapsed"
class="hover-container"
@toggleClick="setCollapsed"
/>
<breadcrumb v-if="showBreadcrumb" />
<div v-if="showScreenfull || showUserInfo" class="navbar__wrap--right">
<screenfull v-if="showScreenfull" class="hover-container screenfull-container" />
<user-info v-if="showUserInfo" class="hover-container user-container" />
</div>
</div>
<div
v-if="showTags"
class="tags__wrap"
>
<tags-view />
</div>
</div>
<div v-if="showTags" class="tags__wrap">
<tags-view />
</div>
<app-main />
</el-scrollbar>
@@ -101,7 +110,9 @@ export default defineComponent({
const showScreenfull = computed(() => appStore.showScreenfull)
const showUserInfo = computed(() => appStore.showUserInfo)
const showNavbar = computed(() => appStore.showNavbar)
const fixedNavbar = computed(() => appStore.fixedNavbar)
// const fixedNavbar = computed(() => appStore.fixedNavbar)
// const fixedTags = computed(() => appStore.fixedTags)
const fixedHeader = computed(() => appStore.fixedHeader)
const classObj = computed(() => {
const obj = {}
@@ -128,7 +139,9 @@ export default defineComponent({
showScreenfull,
showUserInfo,
showNavbar,
fixedNavbar,
fixedHeader,
// fixedNavbar,
// fixedTags,
setCollapsed,
toggleClick
}
@@ -137,7 +150,7 @@ export default defineComponent({
</script>
<style lang="less" scoped>
.app__wrap--Classic {
.app__wrap {
position: relative;
height: 100%;
width: 100%;
@@ -163,58 +176,47 @@ export default defineComponent({
left: @menuWidth;
transition: all 0.2s;
z-index: 1;
.navbar__wrap {
display: flex;
align-items: center;
height: @navbarHeight;
padding: 0 20px 0 15px;
position: relative;
background: @contentBg;
.header__wrap {
transition: all 0.2s;
&:after {
content: "";
width: 100%;
height: 1px;
border-top: 1px solid #d8dce5;
position: absolute;
bottom: 0;
left: 0;
}
@{deep}(.hover-container) {
transition: background 0.2s;
height: 100%;
line-height: @navbarHeight + 5px;
padding: 0 5px;
&:hover {
background: #f6f6f6;
}
}
.navbar__wrap--right {
.navbar__wrap {
display: flex;
align-items: center;
height: @navbarHeight;
position: absolute;
top: 0;
right: 20px;
@{deep}(.screenfull-container),
@{deep}(.user-container) {
line-height: @navbarHeight !important;
padding: 0 20px 0 15px;
position: relative;
background: @contentBg;
&:after {
content: "";
width: 100%;
height: 1px;
border-top: 1px solid #d8dce5;
position: absolute;
bottom: 0;
left: 0;
}
@{deep}(.hover-container) {
transition: background 0.2s;
height: 100%;
line-height: @navbarHeight + 5px;
padding: 0 5px;
&:hover {
background: #f6f6f6;
}
}
.navbar__wrap--right {
display: flex;
align-items: center;
height: @navbarHeight;
position: absolute;
top: 0;
right: 20px;
@{deep}(.screenfull-container),
@{deep}(.user-container) {
line-height: @navbarHeight !important;
}
}
}
}
// 固定顶部操作栏
.navbar__wrap--fixed {
position: fixed;
width: calc(~"100% - @{menuWidth} - 35px");
top: 0;
left: @menuWidth;
z-index: 200;
}
.navbar__wrap--collapsed {
width: calc(~"100% - @{menuMinWidth} - 35px");
left: @menuMinWidth;
}
// 固定顶部操作栏
// content样式
.main__wrap--content {
@@ -223,10 +225,6 @@ export default defineComponent({
overflow-x: hidden;
}
}
.main__wrap--navFixed {
padding-top: @navbarHeight;
height: calc(~"100% - @{navbarHeight}");
}
// content样式
}
.main__wrap--collapsed {
@@ -235,6 +233,33 @@ export default defineComponent({
}
}
// 经典模式
.app__wrap--Classic {
.main__wrap--fixed--all {
margin-top: @navbarHeight + @tagsViewHeight !important;
height: calc(~"100% - @{navbarHeight} - @{tagsViewHeight}") !important;
}
.main__wrap--fixed--nav {
margin-top: @navbarHeight !important;
height: calc(~"100% - @{navbarHeight}") !important;
}
.main__wrap--fixed--tags {
margin-top: @tagsViewHeight !important;
height: calc(~"100% - @{tagsViewHeight}") !important;
}
.header__wrap--fixed {
position: fixed !important;
width: calc(~"100% - @{menuWidth}") !important;
top: 0 !important;
left: @menuWidth !important;
z-index: 200;
}
.header__wrap--collapsed {
width: calc(~"100% - @{menuMinWidth}") !important;
left: @menuMinWidth !important;
}
}
// 项目配置
.setting__wrap {
position: fixed;

42
src/pages/index/store/modules/app.ts
View File

@@ -6,8 +6,9 @@ export interface AppState {
showTags: boolean
showLogo: boolean
showNavbar: boolean
fixedTags: boolean
fixedNavbar: boolean
fixedHeader: boolean
// fixedTags: boolean
// fixedNavbar: boolean
layout: string
showBreadcrumb: boolean
showHamburger: boolean
@@ -21,8 +22,9 @@ class App extends VuexModule implements AppState {
public showLogo = true // 是否显示logo
public showTags = true // 是否显示标签栏
public showNavbar = true // 是否显示navbar
public fixedTags = true // 是否固定标签栏
public fixedNavbar = true // 是否固定navbar
// public fixedTags = true // 是否固定标签栏
// public fixedNavbar = true // 是否固定navbar
public fixedHeader = true // 是否固定header
public layout = 'Classic' // layout布局
public showBreadcrumb = true // 是否显示面包屑
public showHamburger = true // 是否显示侧边栏缩收按钮
@@ -45,13 +47,17 @@ class App extends VuexModule implements AppState {
private SET_NAVBAR(showNavbar: boolean): void {
this.showNavbar = showNavbar
}
// @Mutation
// private SET_FIXEDTAGS(fixedTags: boolean): void {
// this.fixedTags = fixedTags
// }
// @Mutation
// private SET_FIXEDNAVBAR(fixedNavbar: boolean): void {
// this.fixedNavbar = fixedNavbar
// }
@Mutation
private SET_FIXEDTAGS(fixedTags: boolean): void {
this.fixedTags = fixedTags
}
@Mutation
private SET_FIXEDNAVBAR(fixedNavbar: boolean): void {
this.fixedNavbar = fixedNavbar
private SET_FIXEDHEADER(fixedHeader: boolean): void {
this.fixedHeader = fixedHeader
}
@Mutation
private SET_LAYOUT(layout: 'Classic' | 'LeftTop' | 'Top' | 'Test'): void {
@@ -91,13 +97,17 @@ class App extends VuexModule implements AppState {
this.SET_NAVBAR(showNavbar)
}
@Action
public SetFixedTags(fixedTags: boolean): void {
this.SET_FIXEDTAGS(fixedTags)
}
@Action
public SetFixedNavbar(fixedNavbar: boolean): void {
this.SET_FIXEDNAVBAR(fixedNavbar)
public SetFixedHeader(fixedHeader: boolean): void {
this.SET_FIXEDHEADER(fixedHeader)
}
// @Action
// public SetFixedTags(fixedTags: boolean): void {
// this.SET_FIXEDTAGS(fixedTags)
// }
// @Action
// public SetFixedNavbar(fixedNavbar: boolean): void {
// this.SET_FIXEDNAVBAR(fixedNavbar)
// }
@Action
public SetLayout(layout: 'Classic' | 'LeftTop' | 'Top' | 'Test'): void {
this.SET_LAYOUT(layout)