feat: 🎸 重构sider组件中
This commit is contained in:
chenkl
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- <i v-if="icon.includes('el-icon')" :class="[icon, 'sub-el-icon', 'anticon']" /> -->
|
||||
<svg-icon :icon-class="icon" class="anticon" />
|
||||
<i v-if="icon.includes('el-icon')" :class="[icon, 'sub-el-icon', 'anticon']" />
|
||||
<svg-icon v-else :icon-class="icon" class="anticon" />
|
||||
<slot name="title">
|
||||
<span class="anticon-item">{{ title }}</span>
|
||||
</slot>
|
||||
|
||||
@@ -1,25 +1,29 @@
|
||||
<template>
|
||||
<div class="app__wrap">
|
||||
<div class="sidebar__wrap">
|
||||
<el-container class="app__wrap">
|
||||
<div class="sidebar__wrap" :class="{'sidebar__wrap--collapsed': collapsed}">
|
||||
<logo
|
||||
v-if="show_logo"
|
||||
v-if="showLogo"
|
||||
:collapsed="collapsed"
|
||||
/>
|
||||
<sider /></div>
|
||||
<sider />
|
||||
</div>
|
||||
<el-main><hamburger :collapsed="collapsed" class="hamburger-container" @toggleClick="setCollapsed" /></el-main>
|
||||
</el-container>
|
||||
<!-- <div class="app__wrap">
|
||||
<div class="sidebar__wrap" :class="{'sidebar__wrap--collapsed': collapsed}">
|
||||
<logo
|
||||
v-if="showLogo"
|
||||
:collapsed="collapsed"
|
||||
/>
|
||||
<sider />
|
||||
</div>
|
||||
<div class="main__wrap">
|
||||
<div class="navbar__wrap" />
|
||||
<div class="navbar__wrap">
|
||||
</div>
|
||||
<div class="tags__wrap" />
|
||||
<div class="main__wrap" />
|
||||
</div>
|
||||
<!-- <sidebar class="sidebar-wrap" />
|
||||
<div :class="{hasTagsView: has_tags}" class="main-wrap">
|
||||
<div>
|
||||
<navbar />
|
||||
<tags-view v-if="has_tags" />
|
||||
</div>
|
||||
<app-main />
|
||||
</div> -->
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -31,32 +35,63 @@ import TagsView from '../components/TagsView.vue'
|
||||
import Logo from '_c/Logo/index.vue'
|
||||
import Scrollbar from '_c/Scrollbar/index.vue'
|
||||
import Sider from '_c/Sider/index.vue'
|
||||
import Navbar from '../components/Navbar.vue'
|
||||
|
||||
import config from '_p/index/config'
|
||||
const { show_logo, has_tags } = config
|
||||
import Hamburger from '_c/Hamburger/index.vue'
|
||||
export default defineComponent({
|
||||
name: 'Layout',
|
||||
components: {
|
||||
Sider,
|
||||
Navbar,
|
||||
Hamburger,
|
||||
// Navbar,
|
||||
AppMain,
|
||||
TagsView,
|
||||
Logo,
|
||||
Scrollbar
|
||||
},
|
||||
setup() {
|
||||
const collapsed = computed(() => appStore.collapsed)
|
||||
const showLogo = computed(() => appStore.showLogo)
|
||||
const showTags = computed(() => appStore.showTags)
|
||||
|
||||
function setCollapsed(collapsed: boolean): void {
|
||||
appStore.SetCollapsed(collapsed)
|
||||
}
|
||||
|
||||
return {
|
||||
show_logo, has_tags
|
||||
collapsed,
|
||||
showLogo,
|
||||
showTags,
|
||||
setCollapsed
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.app-wrap {
|
||||
.app__wrap {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// .sidebar__wrap {
|
||||
// position: absolute;
|
||||
// width: @menuWidth;
|
||||
// top: 0;
|
||||
// left: 0;
|
||||
// height: 100%;
|
||||
// transition: all 0.2s;
|
||||
// }
|
||||
// .sidebar__wrap--collapsed {
|
||||
// width: @menuMinWidth;
|
||||
|
||||
// }
|
||||
// .main__wrap {
|
||||
// position: absolute;
|
||||
// width: calc(~"100% - @{menuWidth}");
|
||||
// height: 100%;
|
||||
// top: 0;
|
||||
// left: @menuWidth;
|
||||
// .navbar__wrap {
|
||||
// height: @navbarHeight;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -357,65 +357,65 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: '/level',
|
||||
// component: Layout,
|
||||
// redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
// name: 'Level',
|
||||
// meta: {
|
||||
// title: '多级菜单缓存',
|
||||
// icon: 'nested'
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'menu1',
|
||||
// name: 'Menu1Demo',
|
||||
// component: getParentLayout('Menu1Demo'),
|
||||
// redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
// meta: {
|
||||
// title: 'Menu1'
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'menu1-1',
|
||||
// name: 'Menu11Demo',
|
||||
// component: getParentLayout('Menu11Demo'),
|
||||
// redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
// meta: {
|
||||
// title: 'Menu1-1',
|
||||
// alwaysShow: true
|
||||
// },
|
||||
// children: [
|
||||
// {
|
||||
// path: 'menu1-1-1',
|
||||
// name: 'Menu111Demo',
|
||||
// component: () => import('_p/index/views/level/Menu111.vue'),
|
||||
// meta: {
|
||||
// title: 'Menu1-1-1'
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: 'menu1-2',
|
||||
// name: 'Menu12Demo',
|
||||
// component: () => import('_p/index/views/level/Menu12.vue'),
|
||||
// meta: {
|
||||
// title: 'Menu1-2'
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
// {
|
||||
// path: 'menu2',
|
||||
// name: 'Menu2Demo',
|
||||
// component: () => import('_p/index/views/level/Menu2.vue'),
|
||||
// meta: {
|
||||
// title: 'Menu2'
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
path: '/level',
|
||||
component: Layout,
|
||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
name: 'Level',
|
||||
meta: {
|
||||
title: '多级菜单缓存',
|
||||
icon: 'nested'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1',
|
||||
name: 'Menu1Demo',
|
||||
component: getParentLayout('Menu1Demo'),
|
||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
meta: {
|
||||
title: 'Menu1'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-1',
|
||||
name: 'Menu11Demo',
|
||||
component: getParentLayout('Menu11Demo'),
|
||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
meta: {
|
||||
title: 'Menu1-1',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-1-1',
|
||||
name: 'Menu111Demo',
|
||||
component: () => import('_p/index/views/level/Menu111.vue'),
|
||||
meta: {
|
||||
title: 'Menu1-1-1'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu1-2',
|
||||
name: 'Menu12Demo',
|
||||
component: () => import('_p/index/views/level/Menu12.vue'),
|
||||
meta: {
|
||||
title: 'Menu1-2'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu2',
|
||||
name: 'Menu2Demo',
|
||||
component: () => import('_p/index/views/level/Menu2.vue'),
|
||||
meta: {
|
||||
title: 'Menu2'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// path: '/example-demo',
|
||||
// component: Layout,
|
||||
|
||||
@@ -14,7 +14,7 @@ export interface AppState {
|
||||
@Module({ dynamic: true, namespaced: true, store, name: 'app' })
|
||||
class App extends VuexModule implements AppState {
|
||||
public collapsed = false // 菜单栏是否栏缩收
|
||||
public showLogo = true // 是否显示logo
|
||||
public showLogo = false // 是否显示logo
|
||||
public showTags = true // 是否显示标签栏
|
||||
public showNavbar = true // 是否显示navbar
|
||||
public fixedTags = true // 是否固定标签栏
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="padding: 20px; background: #fff;display: flex;align-items: center;">
|
||||
<div style="min-width: 200px;">多层级缓存-页面1-1-1：</div>
|
||||
<a-input />
|
||||
<el-input />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="padding: 20px; background: #fff;display: flex;align-items: center;">
|
||||
<div style="min-width: 200px;">多层级缓存-页面1-2：</div>
|
||||
<a-input />
|
||||
<el-input />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div style="padding: 20px; background: #fff;display: flex;align-items: center;">
|
||||
<div style="min-width: 200px;">多层级缓存-页面2：</div>
|
||||
<a-input />
|
||||
<el-input />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user