zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD 布局增加经典布局

This commit is contained in:
sakuya 2021-07-06 18:53:50 +08:00
parent 68702a45a0
commit d024f448b0
3 changed files with 63 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/config/index.js
View File

@ -11,7 +11,7 @@ const DEFAULT_CONFIG = {
//MOCK接口地址
MOCK_URL: "https://www.fastmock.site/mock/44c807475f7eeba73409792255781935/api",
//布局 默认：default | 通栏：header
//布局 默认：default | 通栏：header | 经典：menu
LAYOUT: 'default',
//菜单是否折叠

1
src/layout/components/setting.vue
View File

@ -6,6 +6,7 @@
<el-select v-model="layout" placeholder="请选择">
<el-option label="默认" value="default"></el-option>
<el-option label="通栏" value="header"></el-option>
<el-option label="经典" value="menu"></el-option>
</el-select>
</el-form-item>
<el-form-item label="折叠菜单">

75
src/layout/index.vue
View File

@ -4,7 +4,7 @@
<header class="adminui-header">
<div class="adminui-header-left">
<div class="logo-bar">
<img class="logo" :alt="appName" src="img/logo.png">
<img class="logo" src="img/logo.png">
<span>{{ $CONFIG.APP_NAME }}</span>
</div>
<ul v-if="!ismobile" class="nav">
@ -24,9 +24,46 @@
<h2>{{ pmenu.meta.title }}</h2>
</div>
<div class="adminui-side-scroll">
<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
<NavMenu :navMenus="nextMenu"></NavMenu>
</el-menu>
<el-scrollbar>
<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
<NavMenu :navMenus="nextMenu"></NavMenu>
</el-menu>
</el-scrollbar>
</div>
</div>
<Side-m v-if="ismobile"></Side-m>
<div class="aminui-body el-container">
<Topbar v-if="!ismobile"></Topbar>
<Tags v-if="!ismobile && layoutTags"></Tags>
<div class="adminui-main" id="adminui-main">
<router-view></router-view>
<iframe-view></iframe-view>
</div>
</div>
</section>
</template>
<!-- 经典布局 -->
<template v-else-if="layout=='menu'">
<header class="adminui-header">
<div class="adminui-header-left">
<div class="logo-bar">
<img class="logo" src="img/logo.png">
<span>{{ $CONFIG.APP_NAME }}</span>
</div>
</div>
<div class="adminui-header-right">
<userbar></userbar>
</div>
</header>
<section class="aminui-wrapper">
<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
<div class="adminui-side-scroll">
<el-scrollbar>
<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
<NavMenu :navMenus="menu"></NavMenu>
</el-menu>
</el-scrollbar>
</div>
</div>
<Side-m v-if="ismobile"></Side-m>
@ -46,13 +83,15 @@
<section class="aminui-wrapper">
<div v-if="!ismobile" class="aminui-side-split">
<div class="adminui-side-split-scroll">
<ul>
<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
@click="showMenu(item)">
<i :class="item.meta.icon || 'el-icon-menu'"></i>
<p>{{ item.meta.title }}</p>
</li>
</ul>
<el-scrollbar>
<ul>
<li v-for="item in menu" :key="item" :class="pmenu.path==item.path?'active':''"
@click="showMenu(item)">
<i :class="item.meta.icon || 'el-icon-menu'"></i>
<p>{{ item.meta.title }}</p>
</li>
</ul>
</el-scrollbar>
</div>
</div>
<div v-if="!ismobile" :class="menuIsCollapse?'aminui-side isCollapse':'aminui-side'">
@ -60,9 +99,11 @@
<h2>{{ pmenu.meta.title }}</h2>
</div>
<div class="adminui-side-scroll">
<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
<NavMenu :navMenus="nextMenu"></NavMenu>
</el-menu>
<el-scrollbar>
<el-menu :default-active="$route.meta.active || $route.fullPath" router :collapse="menuIsCollapse">
<NavMenu :navMenus="nextMenu"></NavMenu>
</el-menu>
</el-scrollbar>
</div>
</div>
<Side-m v-if="ismobile"></Side-m>
@ -140,6 +181,12 @@
watch: {
$route() {
this.showThis()
},
layout: {
handler(val){
document.body.setAttribute('data-layout', val)
},
immediate: true,
}
},
methods: {