优化菜单展示模式

This commit is contained in:
季圣华
2021-09-16 23:18:08 +08:00
parent 79dc9a469a
commit 01a7e6de9c
3 changed files with 160 additions and 216 deletions

View File

@@ -58,49 +58,8 @@
<a-divider />
<div :style="{ marginBottom: '24px' }">
<!-- <h3 class="setting-drawer-index-title">导航模式</h3>-->
<!-- <div class="setting-drawer-index-blockChecbox">-->
<!-- <a-tooltip>-->
<!-- <template slot="title">-->
<!-- 侧边栏导航-->
<!-- </template>-->
<!-- <div class="setting-drawer-index-item" @click="handleLayout('sidemenu')">-->
<!-- <img src="https://gw.alipayobjects.com/zos/rmsportal/JopDzEhOqwOjeNTXkoje.svg" alt="sidemenu">-->
<!-- <div class="setting-drawer-index-selectIcon" v-if="layoutMode === 'sidemenu'">-->
<!-- <a-icon type="check"/>-->
<!-- </div>-->
<!-- </div>-->
<!-- </a-tooltip>-->
<!-- <a-tooltip>-->
<!-- <template slot="title">-->
<!-- 顶部栏导航-->
<!-- </template>-->
<!-- <div class="setting-drawer-index-item" @click="handleLayout('topmenu')">-->
<!-- <img src="https://gw.alipayobjects.com/zos/rmsportal/KDNDBbriJhLwuqMoxcAr.svg" alt="topmenu">-->
<!-- <div class="setting-drawer-index-selectIcon" v-if="layoutMode !== 'sidemenu'">-->
<!-- <a-icon type="check"/>-->
<!-- </div>-->
<!-- </div>-->
<!-- </a-tooltip>-->
<!-- </div>-->
<div :style="{ marginTop: '24px' }">
<a-list :split="false">
<!-- <a-list-item>-->
<!-- <a-tooltip slot="actions">-->
<!-- <template slot="title">-->
<!-- 该设定仅 [顶部栏导航] 时有效-->
<!-- </template>-->
<!-- <a-select size="small" style="width: 80px;" :defaultValue="contentWidth" @change="handleContentWidthChange">-->
<!-- <a-select-option value="Fixed">固定</a-select-option>-->
<!-- <a-select-option value="Fluid" v-if="layoutMode !== 'sidemenu'">流式</a-select-option>-->
<!-- </a-select>-->
<!-- </a-tooltip>-->
<!-- <a-list-item-meta>-->
<!-- <div slot="title">内容区域宽度</div>-->
<!-- </a-list-item-meta>-->
<!-- </a-list-item>-->
<a-list-item>
<a-switch slot="actions" size="small" :defaultChecked="fixedHeader" @change="handleFixedHeader" />
<a-list-item-meta>
@@ -114,7 +73,7 @@
</a-list-item-meta>
</a-list-item>
<a-list-item >
<a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :checked="dataFixSiderbar" @change="handleFixSiderbar" />
<a-switch slot="actions" size="small" :disabled="(layoutMode === 'topmenu')" :checked="fixSiderbar" @change="handleFixSiderbar" />
<a-list-item-meta>
<div slot="title" :style="{ textDecoration: layoutMode === 'topmenu' ? 'line-through' : 'unset' }">固定侧边菜单</div>
</a-list-item-meta>
@@ -143,19 +102,8 @@
</a-list>
</div>
</div>
<!-- <a-divider />-->
<!-- <div :style="{ marginBottom: '24px' }">-->
<!-- <a-alert type="warning">-->
<!-- <span slot="message">-->
<!-- 生产环境如需修改默认配置,请手动修改配置文件-->
<!-- src/defaultSettings.js-->
<!-- </span>-->
<!-- </a-alert>-->
<!-- </div>-->
</div>
<div class="setting-drawer-index-handle" @click="toggle" v-if="visible">
<!-- <a-icon type="setting" v-if="!visible"/>-->
<!-- <a-icon type="close" v-else/>-->
<a-icon type="close" />
</div>
</a-drawer>
@@ -179,8 +127,7 @@
data() {
return {
visible: true,
colorList,
dataFixSiderbar: false
colorList
}
},
watch: {
@@ -225,7 +172,7 @@
handleLayout (mode) {
this.$store.dispatch('ToggleLayoutMode', mode)
// 因为顶部菜单不能固定左侧菜单栏,所以强制关闭
this.handleFixSiderbar(false)
this.handleFixSiderbar(this.fixSiderbar)
// 触发窗口resize事件
triggerWindowResizeEvent()
},
@@ -245,10 +192,7 @@
this.$store.dispatch('ToggleFixedHeaderHidden', autoHidden)
},
handleFixSiderbar (fixed) {
if (this.layoutMode === 'topmenu') {
fixed = false
}
this.dataFixSiderbar = fixed
this.fixSiderbar = fixed
this.$store.dispatch('ToggleFixSiderbar', fixed)
}
},

View File

@@ -19,7 +19,7 @@ export default {
layout: 'sidemenu', // nav menu position: sidemenu or topmenu
contentWidth: 'Fixed', // layout of content: Fluid or Fixed, only works when layout is topmenu
fixedHeader: false, // sticky header
fixSiderbar: false, // sticky siderbar
fixSiderbar: true, // sticky siderbar
autoHideHeader: false, // auto hide header
colorWeak: false,
multipage: true, //默认多页签模式

View File

@@ -23,7 +23,7 @@ const app = {
layout: '',
contentWidth: '',
fixedHeader: false,
fixSiderbar: false,
fixSiderbar: true,
autoHideHeader: false,
color: null,
weak: false,