blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-06 04:00:06 +08:00
Code Issues Projects Releases Wiki Activity

refactor: sider menu

Browse Source
This commit is contained in:
iczer 2018-08-14 22:11:56 +08:00
parent 2e82bdd162
commit 268c72d9a9
2 changed files with 76 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/layout/GlobalLayout.vue
View File

@ -1,25 +1,9 @@
<template>
<a-layout>
<drawer v-if="isMobile" :openDrawer="collapsed" @change="onDrawerChange">
<a-layout-sider class="sider" width="256px" :trigger="null">
<div class="logo">
<a href="/">
<img src="static/img/vue-antd-logo.png">
<h1>Vue Ant Pro</h1>
</a>
</div>
<i-menu :collapsed="true" :menuData="menuData" @select="onMenuSelect"/>
</a-layout-sider>
<sider-menu :menuData="menuData" :collapsed="false" :collapsible="false" @menuSelect="onMenuSelect"/>
</drawer>
<a-layout-sider v-else class="sider" width="256px" collapsible v-model="collapsed" :trigger="null">
<div class="logo">
<a href="/">
<img src="static/img/vue-antd-logo.png">
<h1>Vue Ant Pro</h1>
</a>
</div>
<i-menu :collapsed="collapsed" :menuData="menuData" />
</a-layout-sider>
<sider-menu v-else :menuData="menuData" :collapsed="collapsed" :collapsible="true" />
<a-layout>
<global-header :collapsed="collapsed" @toggleCollapse="toggleCollapse"/>
<a-layout-content :style="{minHeight: minHeight, margin: '24px 24px 0'}">
@ -39,6 +23,7 @@ import AIcon from 'ant-design-vue/es/icon/icon'
import IMenu from '../menu/menu'
import GlobalFooter from './GlobalFooter'
import Drawer from '../tool/Drawer'
import SiderMenu from '../menu/SiderMenu'
const ALayoutSider = ALayout.Sider
const ALayoutHeader = ALayout.Header
@ -51,6 +36,7 @@ let menuData = []
export default {
name: 'GlobalLayout',
components: {
SiderMenu,
Drawer,
GlobalFooter,
AIcon,
@ -78,10 +64,9 @@ export default {
this.collapsed = !this.collapsed
},
onDrawerChange (show) {
console.log(show)
this.collapsed = show
},
onMenuSelect (obj) {
onMenuSelect () {
this.toggleCollapse()
}
},
@ -92,31 +77,4 @@ export default {
</script>
<style lang="less" scoped>
.sider{
z-index: 10;
box-shadow: 2px 0 6px rgba(0,21,41,.35);
.logo{
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
h1{
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
font-weight: 600;
display: inline-block;
}
img{
width: 32px;
display: inline-block;
vertical-align: middle;
}
}
}
</style>

71
src/components/menu/SiderMenu.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<a-layout-sider class="sider" width="256px" :collapsible="collapsible" v-model="collapsed" :trigger="null">
<div class="logo">
<a href="/">
<img src="static/img/vue-antd-logo.png">
<h1>Vue Ant Pro</h1>
</a>
</div>
<i-menu :collapsed="collapsed" :menuData="menuData" @select="onSelect"/>
</a-layout-sider>
</template>
<script>
import ALayoutSider from 'ant-design-vue/es/layout/Sider'
import IMenu from './menu'
export default {
name: 'SiderMenu',
components: {IMenu, ALayoutSider},
props: {
collapsible: {
type: Boolean,
required: false,
default: false
},
collapsed: {
type: Boolean,
required: false,
default: false
},
menuData: {
type: Array,
required: true
}
},
methods: {
onSelect (obj) {
this.$emit('menuSelect', obj)
}
}
}
</script>
<style lang="less" scoped>
.sider{
z-index: 10;
box-shadow: 2px 0 6px rgba(0,21,41,.35);
.logo{
height: 64px;
position: relative;
line-height: 64px;
padding-left: 24px;
-webkit-transition: all .3s;
transition: all .3s;
background: #002140;
overflow: hidden;
h1{
color: #fff;
font-size: 20px;
margin: 0 0 0 12px;
font-family: "Myriad Pro","Helvetica Neue",Arial,Helvetica,sans-serif;
font-weight: 600;
display: inline-block;
}
img{
width: 32px;
display: inline-block;
vertical-align: middle;
}
}
}
</style>