feat: setting 页面新增 是否显示footer的开关

This commit is contained in:
zuihou 2022-12-02 16:47:18 +08:00
parent 091ca1a4fe
commit d064f6285a
6 changed files with 14 additions and 2 deletions

View File

@ -11,6 +11,7 @@
:sider-collapsed-width="siderCollapsedWidth" :sider-collapsed-width="siderCollapsedWidth"
:sider-collapse="app.siderCollapse" :sider-collapse="app.siderCollapse"
:fixed-footer="theme.footer.fixed" :fixed-footer="theme.footer.fixed"
:footer-visible="theme.footer.visible"
@update:sider-collapse="app.setSiderCollapse" @update:sider-collapse="app.setSiderCollapse"
> >
<template #header> <template #header>

View File

@ -61,6 +61,9 @@
<setting-menu label="固定底部"> <setting-menu label="固定底部">
<n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" /> <n-switch :value="theme.footer.fixed" @update:value="theme.setFooterIsFixed" />
</setting-menu> </setting-menu>
<setting-menu label="显示底部">
<n-switch :value="theme.footer.visible" @update:value="theme.setFooterVisible" />
</setting-menu>
</n-space> </n-space>
</template> </template>

View File

@ -110,7 +110,8 @@
}, },
"footer": { "footer": {
"fixed": false, "fixed": false,
"height": 48 "height": 48,
"visible": true
}, },
"page": { "page": {
"animate": true, "animate": true,

View File

@ -88,7 +88,8 @@ const defaultThemeSetting: Theme.Setting = {
}, },
footer: { footer: {
fixed: false, fixed: false,
height: 48 height: 48,
visible: true
}, },
page: { page: {
animate: true, animate: true,

View File

@ -149,6 +149,10 @@ export const useThemeStore = defineStore('theme-store', {
setFooterHeight(height: number) { setFooterHeight(height: number) {
this.footer.height = height; this.footer.height = height;
}, },
/** 设置底部是否显示 */
setFooterVisible(isVisible: boolean) {
this.footer.visible = isVisible;
},
/** 设置切换页面时是否过渡动画 */ /** 设置切换页面时是否过渡动画 */
setPageIsAnimate(animate: boolean) { setPageIsAnimate(animate: boolean) {
this.page.animate = animate; this.page.animate = animate;

View File

@ -236,6 +236,8 @@ declare namespace Theme {
fixed: boolean; fixed: boolean;
/** 底部高度 */ /** 底部高度 */
height: number; height: number;
/* 底部是否可见 */
visible: boolean;
} }
/** 页面样式 */ /** 页面样式 */