'admin-21.01.06:编写布局配置及相关功能'

This commit is contained in:
lyt 2021-01-06 18:41:05 +08:00
parent 1251793913
commit 19d438d8f5
14 changed files with 124 additions and 47 deletions

View File

@ -23,7 +23,10 @@ export interface RootStateTypes {
isCollapse1: boolean, isCollapse1: boolean,
menuWidth1: number, menuWidth1: number,
isShowLogo: boolean, isShowLogo: boolean,
isShowLogoChange: boolean isShowLogoChange: boolean,
isBreadcrumb: boolean,
isTagsview: boolean,
isFooter: boolean
} }
} }

View File

@ -39,18 +39,12 @@ body,
overflow-x: hidden !important; overflow-x: hidden !important;
} }
.el-header { .el-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 8%); box-shadow: 0 1px 4px rgb(0 21 41 / 4%);
padding: 0 !important; padding: 0 !important;
} }
.el-main { .el-main {
padding: 0 !important; padding: 0 !important;
} }
.el-main-overflow-unset {
overflow: unset !important;
}
.el-main-overflow-auto {
overflow: auto !important;
}
.el-scrollbar { .el-scrollbar {
width: 100%; width: 100%;
} }
@ -66,10 +60,6 @@ body,
@extend .el-scrollbar; @extend .el-scrollbar;
padding: 15px; padding: 15px;
} }
.layout-container-header-main {
display: flex;
flex-direction: column;
}
} }
/* element plus 全局样式 /* element plus 全局样式
@ -96,6 +86,11 @@ body,
.flex-auto { .flex-auto {
flex: 1; flex: 1;
} }
.flex-center {
@extend .flex;
flex-direction: column;
width: 100%;
}
/* 宽高 100% /* 宽高 100%
------------------------------- */ ------------------------------- */

View File

@ -20,5 +20,8 @@ export default {
isCollapse1: false, isCollapse1: false,
menuWidth1: 200, menuWidth1: 200,
isShowLogo: false, isShowLogo: false,
isShowLogoChange: false isShowLogoChange: false,
isBreadcrumb: true,
isTagsview: true,
isFooter: false
} }

View File

@ -8,10 +8,10 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import Logo from "/@/views/layout/logo/index.vue";
import Vertical from "/@/views/layout/navMenu/vertical.vue";
import { toRefs, reactive, computed, watch, getCurrentInstance } from "vue"; import { toRefs, reactive, computed, watch, getCurrentInstance } from "vue";
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
import Logo from "/@/views/layout/logo/index.vue";
import Vertical from "/@/views/layout/navMenu/vertical.vue";
export default { export default {
name: "layoutAside", name: "layoutAside",
components: { Logo, Vertical }, components: { Logo, Vertical },

View File

@ -1,13 +1,24 @@
<template> <template>
<el-header height="84px"> <el-header :height="getThemeConfig.isTagsview ? '84px' : '50px'">
<NavBarsIndex /> <NavBarsIndex />
</el-header> </el-header>
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed } from "vue";
import { useStore } from "/@/store/index.ts";
import NavBarsIndex from "/@/views/layout/navBars/index.vue"; import NavBarsIndex from "/@/views/layout/navBars/index.vue";
export default { export default {
name: "layoutHeader", name: "layoutHeader",
components: { NavBarsIndex }, components: { NavBarsIndex },
setup() {
const store = useStore();
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
return {
getThemeConfig,
};
},
}; };
</script> </script>

View File

@ -1,6 +1,7 @@
<template> <template>
<el-main :class="getThemeConfig.isFixedHeader ? 'el-main-overflow-auto' : 'el-main-overflow-unset'"> <el-main>
<el-scrollbar class="layout-scrollbar" style="min-height: calc(100vh - 84px);" ref="layoutScrollbarRef"> <el-scrollbar class="layout-scrollbar" :style="{minHeight: `calc(100vh - ${headerHeight}`}"
ref="layoutScrollbarRef">
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="transitionName" mode="out-in"> <transition :name="transitionName" mode="out-in">
<div :key="key"> <div :key="key">
@ -10,6 +11,7 @@
</div> </div>
</transition> </transition>
</router-view> </router-view>
<Footer v-if="getThemeConfig.isFooter" />
</el-scrollbar> </el-scrollbar>
</el-main> </el-main>
</template> </template>
@ -25,14 +27,17 @@ import {
} from "vue"; } from "vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router"; import { useRoute, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
import Footer from "/@/views/layout/footer/index.vue";
export default defineComponent({ export default defineComponent({
name: "layoutMain", name: "layoutMain",
components: { Footer },
setup() { setup() {
const { proxy } = getCurrentInstance(); const { proxy } = getCurrentInstance();
const store = useStore(); const store = useStore();
const route = useRoute(); const route = useRoute();
const state = reactive({ const state = reactive({
transitionName: "slide-right", transitionName: "slide-right",
headerHeight: "84px",
}); });
const getThemeConfig = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig; return store.state.themeConfig;
@ -43,6 +48,7 @@ export default defineComponent({
to.meta.index > from.meta.index ? "slide-right" : "slide-left"; to.meta.index > from.meta.index ? "slide-right" : "slide-left";
}); });
watch(store.state.themeConfig, (val) => { watch(store.state.themeConfig, (val) => {
state.headerHeight = val.isTagsview ? "84px" : "50px";
if (val.isFixedHeaderChange !== val.isFixedHeader) { if (val.isFixedHeaderChange !== val.isFixedHeader) {
proxy.$refs.layoutScrollbarRef.update(); proxy.$refs.layoutScrollbarRef.update();
} }

View File

@ -1,33 +1,48 @@
<template> <template>
<el-container class="layout-container"> <el-container class="layout-container">
<Aside /> <Aside />
<el-container> <el-container class="flex-center">
<Header v-if="isFixedHeader" />
<el-scrollbar> <el-scrollbar>
<div class="layout-container-header-main" :class="{'vh100': getThemeConfig.isFixedHeader}"> <Header v-if="!isFixedHeader" />
<Header />
<Main /> <Main />
</div>
</el-scrollbar> </el-scrollbar>
</el-container> </el-container>
</el-container> </el-container>
<Setings ref="setingsRef" />
</template> </template>
<script> <script>
import { computed } from 'vue' import { computed, ref, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'
import { useStore } from "/@/store/index.ts"; import { useStore } from "/@/store/index.ts";
import Aside from '/@/views/layout/component/aside.vue'; import Aside from '/@/views/layout/component/aside.vue';
import Header from '/@/views/layout/component/header.vue'; import Header from '/@/views/layout/component/header.vue';
import Main from '/@/views/layout/component/main.vue'; import Main from '/@/views/layout/component/main.vue';
import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
export default { export default {
name: 'layoutFashion', name: 'layoutFashion',
components: { Aside, Header, Main }, components: { Aside, Header, Main, Setings },
setup() { setup() {
const { proxy } = getCurrentInstance();
const store = useStore(); const store = useStore();
const getThemeConfig = computed(() => { const setingsRef = ref();
return store.state.themeConfig; const isFixedHeader = computed(() => {
return store.state.themeConfig.isFixedHeader;
});
const openSetingsDrawer = () => {
setingsRef.value.openDrawer();
}
onBeforeMount(() => {
proxy.mittBus.on("openSetingsDrawer", () => {
openSetingsDrawer();
});
});
onUnmounted(() => {
proxy.mittBus.off("openSetingsDrawer", () => { });
}); });
return { return {
getThemeConfig setingsRef,
isFixedHeader
} }
} }
} }

View File

@ -0,0 +1,43 @@
<template>
<div class="layout-footer mt15" v-show="isDelayFooter">
<div class="layout-footer-warp">
<div>vue-admin-wonderfulMade by lyt with </div>
<div class="mt5">Copyright &copy 深圳市 xxx 软件科技有限公司</div>
</div>
</div>
</template>
<script lang="ts">
import { toRefs, reactive } from "vue";
import { onBeforeRouteUpdate } from "vue-router";
export default {
name: "layoutFooter",
setup() {
const state = reactive({
isDelayFooter: true,
});
onBeforeRouteUpdate((to, from) => {
state.isDelayFooter = false;
setTimeout(() => {
state.isDelayFooter = true;
}, 800);
});
return {
...toRefs(state),
};
},
};
</script>
<style scoped lang="scss">
.layout-footer {
width: 100%;
display: flex;
&-warp {
margin: auto;
color: #9e9e9e;
text-align: center;
animation: logoAnimation 0.3s ease-in-out;
}
}
</style>

View File

@ -28,7 +28,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px; box-shadow: rgb(0 21 41 / 3%) 0px 1px 4px;
color: var(--color-primary); color: var(--color-primary);
font-size: 16px; font-size: 16px;
animation: logoAnimation 0.3s ease-in-out; animation: logoAnimation 0.3s ease-in-out;

View File

@ -1,8 +1,8 @@
<template> <template>
<div class="layout-navbars-breadcrumb"> <div class="layout-navbars-breadcrumb">
<i class="layout-navbars-breadcrumb-icon" :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" <i class="layout-navbars-breadcrumb-icon" :class="getThemeConfig.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
@click="onThemeConfigChange"></i> @click="onThemeConfigChange"></i>
<el-breadcrumb> <el-breadcrumb v-show="getThemeConfig.isBreadcrumb">
<transition-group name="breadcrumb" mode="out-in"> <transition-group name="breadcrumb" mode="out-in">
<el-breadcrumb-item v-for="(v,k) in breadcrumbList" :key="v.meta.title"> <el-breadcrumb-item v-for="(v,k) in breadcrumbList" :key="v.meta.title">
<span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">{{v.meta.title}}</span> <span v-if="k === breadcrumbList.length - 1" class="layout-navbars-breadcrumb-span">{{v.meta.title}}</span>
@ -44,10 +44,9 @@ export default {
const onThemeConfigChange = () => { const onThemeConfigChange = () => {
proxy.mittBus.emit("onMenuClick"); proxy.mittBus.emit("onMenuClick");
store.state.themeConfig.isCollapse = !store.state.themeConfig.isCollapse; store.state.themeConfig.isCollapse = !store.state.themeConfig.isCollapse;
store.dispatch("setThemeConfig", store.state.themeConfig);
}; };
const isCollapse = computed(() => { const getThemeConfig = computed(() => {
return store.state.themeConfig.isCollapse; return store.state.themeConfig;
}); });
onBeforeMount(() => { onBeforeMount(() => {
state.breadcrumbList = route.matched; state.breadcrumbList = route.matched;
@ -57,7 +56,7 @@ export default {
}); });
return { return {
onThemeConfigChange, onThemeConfigChange,
isCollapse, getThemeConfig,
onBreadcrumbClick, onBreadcrumbClick,
...toRefs(state), ...toRefs(state),
}; };

View File

@ -19,7 +19,6 @@ export default {
height: 50px; height: 50px;
display: flex; display: flex;
align-items: center; align-items: center;
border-bottom: 1px solid rgb(230, 230, 230);
padding: 0 15px; padding: 0 15px;
background: var(--bg-topBar); background: var(--bg-topBar);
} }

View File

@ -136,19 +136,19 @@
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">面包屑 Breadcrumb</div> <div class="layout-breadcrumb-seting-bar-flex-label">面包屑 Breadcrumb</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isCollapse1"></el-switch> <el-switch v-model="getThemeConfig.isBreadcrumb"></el-switch>
</div> </div>
</div> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview</div> <div class="layout-breadcrumb-seting-bar-flex-label">开启 Tagsview</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isCollapse1"></el-switch> <el-switch v-model="getThemeConfig.isTagsview"></el-switch>
</div> </div>
</div> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div> <div class="layout-breadcrumb-seting-bar-flex-label">开启 Footer</div>
<div class="layout-breadcrumb-seting-bar-flex-value"> <div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isCollapse1"></el-switch> <el-switch v-model="getThemeConfig.isFooter"></el-switch>
</div> </div>
</div> </div>
<div class="layout-breadcrumb-seting-bar-flex mt15"> <div class="layout-breadcrumb-seting-bar-flex mt15">

View File

@ -26,22 +26,18 @@
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
<Setings ref="setingsRef" />
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref } from "vue"; import { ref, getCurrentInstance } from "vue";
import Setings from "/@/views/layout/navBars/breadcrumb/setings.vue";
export default { export default {
name: "layoutBreadcrumbUser", name: "layoutBreadcrumbUser",
components: { Setings },
setup() { setup() {
const setingsRef = ref(); const { proxy } = getCurrentInstance();
const onLayoutSetingClick = () => { const onLayoutSetingClick = () => {
setingsRef.value.openDrawer(); proxy.mittBus.emit("openSetingsDrawer");
}; };
return { return {
setingsRef,
onLayoutSetingClick, onLayoutSetingClick,
}; };
}, },

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="layout-navbars-tagsview"> <div class="layout-navbars-tagsview" v-show="getThemeConfig.isTagsview">
<Scroll ref="scrollRef"> <Scroll ref="scrollRef">
<ul class="layout-navbars-tagsview-ul"> <ul class="layout-navbars-tagsview-ul">
<li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}" <li v-for="(v,k) in arr2" :key="k" class="layout-navbars-tagsview-ul-li" :class="{'is-active':isActive(v.path)}"
@ -29,6 +29,7 @@ import {
onBeforeUpdate, onBeforeUpdate,
} from "vue"; } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router"; import { useRoute, useRouter, onBeforeRouteUpdate } from "vue-router";
import { useStore } from "/@/store/index.ts";
import Sortable from "sortablejs"; import Sortable from "sortablejs";
import Contextmenu from "/@/views/layout/navBars/tagsView/contextmenu.vue"; import Contextmenu from "/@/views/layout/navBars/tagsView/contextmenu.vue";
import Scroll from "/@/views/layout/navBars/tagsView/scroll.vue"; import Scroll from "/@/views/layout/navBars/tagsView/scroll.vue";
@ -39,6 +40,7 @@ export default {
const tagsRefs = ref([]); const tagsRefs = ref([]);
const scrollRef = ref(); const scrollRef = ref();
const contextmenuRef = ref(); const contextmenuRef = ref();
const store = useStore();
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const state = reactive({ const state = reactive({
@ -56,6 +58,9 @@ export default {
{ id: 1, name: "文档3", path: "/docs3" }, { id: 1, name: "文档3", path: "/docs3" },
], ],
}); });
const getThemeConfig = computed(() => {
return store.state.themeConfig;
});
const initSortable = () => { const initSortable = () => {
const el = document.querySelector(".layout-navbars-tagsview-ul"); const el = document.querySelector(".layout-navbars-tagsview-ul");
const sortable = Sortable.create(el, { animation: 300 }); const sortable = Sortable.create(el, { animation: 300 });
@ -104,6 +109,7 @@ export default {
tagsRefs, tagsRefs,
contextmenuRef, contextmenuRef,
scrollRef, scrollRef,
getThemeConfig,
...toRefs(state), ...toRefs(state),
}; };
}, },
@ -114,6 +120,7 @@ export default {
.layout-navbars-tagsview { .layout-navbars-tagsview {
flex: 1; flex: 1;
background-color: #ffffff; background-color: #ffffff;
border-top: 1px solid rgb(238, 238, 238);
&-ul { &-ul {
list-style: none; list-style: none;
margin: 0; margin: 0;