hjq/PixelAI-admin
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'admin-21.01.06:处理页面滚动条问题'

Browse Source
This commit is contained in:
lyt 2021-01-06 13:30:53 +08:00
parent 4a916d6d12
commit 1251793913
6 changed files with 36 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
vue-admin-wonderful-next/src/store/index.ts
View File

@ -19,9 +19,11 @@ export interface RootStateTypes {
isCollapse: boolean,
isUniqueOpened: boolean,
isFixedHeader: boolean,
isFixedHeaderChange: boolean,
isCollapse1: boolean,
menuWidth1: number,
isShowLogo: boolean
isShowLogo: boolean,
isShowLogoChange: boolean
}
}

1
vue-admin-wonderful-next/src/theme/app.scss
View File

@ -36,6 +36,7 @@ body,
z-index: 1;
display: flex;
flex-direction: column;
overflow-x: hidden !important;
}
.el-header {
box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

4
vue-admin-wonderful-next/src/utils/themeConfig.ts
View File

@ -16,7 +16,9 @@ export default {
isCollapse: false,
isUniqueOpened: false,
isFixedHeader: false,
isFixedHeaderChange: false,
isCollapse1: false,
menuWidth1: 200,
isShowLogo: false
isShowLogo: false,
isShowLogoChange: false
}

4
vue-admin-wonderful-next/src/views/layout/component/aside.vue
View File

@ -71,7 +71,9 @@ export default {
return store.state.themeConfig;
});
watch(store.state.themeConfig, (val) => {
proxy.$refs.layoutAsideScrollbarRef.update();
if (val.isShowLogoChange !== val.isShowLogo) {
proxy.$refs.layoutAsideScrollbarRef.update();
}
});
return {
getThemeConfig,

4
vue-admin-wonderful-next/src/views/layout/component/main.vue
View File

@ -43,7 +43,9 @@ export default defineComponent({
to.meta.index > from.meta.index ? "slide-right" : "slide-left";
});
watch(store.state.themeConfig, (val) => {
proxy.$refs.layoutScrollbarRef.update();
if (val.isFixedHeaderChange !== val.isFixedHeader) {
proxy.$refs.layoutScrollbarRef.update();
}
});
return {
getThemeConfig,

31
vue-admin-wonderful-next/src/views/layout/navBars/breadcrumb/setings.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="layout-breadcrumb-seting">
<el-drawer title="布局配置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px">
<el-drawer title="布局配置" v-model="getThemeConfig.isDrawer" direction="rtl" destroy-on-close size="240px"
@close="onDrawerClose">
<el-scrollbar class="layout-breadcrumb-seting-bar">
<!-- 全局主题 -->
<el-divider content-position="left">全局主题</el-divider>
@ -100,13 +101,13 @@
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">菜单手风琴</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isUniqueOpened" @change="onsetThemeConfigChange"></el-switch>
<el-switch v-model="getThemeConfig.isUniqueOpened"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">固定 Header</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isFixedHeader"></el-switch>
<el-switch v-model="getThemeConfig.isFixedHeader" @change="onIsFixedHeaderChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
@ -129,7 +130,7 @@
<div class="layout-breadcrumb-seting-bar-flex mt15">
<div class="layout-breadcrumb-seting-bar-flex-label">侧边栏 Logo</div>
<div class="layout-breadcrumb-seting-bar-flex-value">
<el-switch v-model="getThemeConfig.isShowLogo" @change="onsetThemeConfigChange"></el-switch>
<el-switch v-model="getThemeConfig.isShowLogo" @change="onIsShowLogoChange"></el-switch>
</div>
</div>
<div class="layout-breadcrumb-seting-bar-flex mt15">
@ -341,11 +342,23 @@ export default defineComponent({
});
};
const onThemeConfigChange = () => {
store.dispatch("setThemeConfig", getThemeConfig.value);
onMenuBarHighlightChange();
};
const onsetThemeConfigChange = () => {
store.dispatch("setThemeConfig", getThemeConfig.value);
const onIsFixedHeaderChange = () => {
getThemeConfig.value.isFixedHeaderChange = getThemeConfig.value
.isFixedHeader
? false
: true;
};
const onIsShowLogoChange = () => {
getThemeConfig.value.isShowLogoChange = getThemeConfig.value.isShowLogo
? false
: true;
};
const onDrawerClose = () => {
// 关闭弹窗时，初始化变量。变量用于处理 proxy.$refs.layoutScrollbarRef.update()
getThemeConfig.value.isFixedHeaderChange = false;
getThemeConfig.value.isShowLogoChange = false;
};
onBeforeMount(() => {
proxy.mittBus.on("onMenuClick", () => {
@ -364,8 +377,10 @@ export default defineComponent({
onMenuBarGradualChange,
onMenuBarHighlightChange,
onThemeConfigChange,
onsetThemeConfigChange,
onIsFixedHeaderChange,
onIsShowLogoChange,
getThemeConfig,
onDrawerClose,
};
},
});