feat: add mobile side menu

master
chenghx 7 years ago
parent 125a22c31e
commit 10c8f3557b
  1. 27
      src/components/layout/GlobalLayout.vue
  2. 5
      src/components/menu/menu.js
  3. 56
      src/components/tool/Drawer.vue

@ -1,6 +1,17 @@
<template>
<a-layout>
<a-layout-sider class="sider" width="256px" collapsible v-model="collapsed" :trigger="null">
<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>
</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">
@ -27,6 +38,7 @@ import GlobalHeader from './GlobalHeader'
import AIcon from 'ant-design-vue/es/icon/icon'
import IMenu from '../menu/menu'
import GlobalFooter from './GlobalFooter'
import Drawer from '../tool/Drawer'
const ALayoutSider = ALayout.Sider
const ALayoutHeader = ALayout.Header
@ -39,6 +51,7 @@ let menuData = []
export default {
name: 'GlobalLayout',
components: {
Drawer,
GlobalFooter,
AIcon,
GlobalHeader,
@ -55,9 +68,21 @@ export default {
menuData: menuData
}
},
computed: {
isMobile () {
return this.$store.state.setting.isMobile
}
},
methods: {
toggleCollapse () {
this.collapsed = !this.collapsed
},
onDrawerChange (show) {
console.log(show)
this.collapsed = show
},
onMenuSelect (obj) {
this.toggleCollapse()
}
},
beforeCreate () {

@ -164,7 +164,10 @@ export default {
},
on: {
openChange: this.onOpenChange,
select: (obj) => { this.selectedKeys = obj.selectedKeys }
select: (obj) => {
this.selectedKeys = obj.selectedKeys
this.$emit('select', obj)
}
}
}, this.renderMenu(h, this.menuData)
)

@ -0,0 +1,56 @@
<template>
<div >
<div :class="['mask', openDrawer ? 'open' : 'close']" @click="close"></div>
<div :class="['drawer', openDrawer ? 'open' : 'close']">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Drawer',
props: ['openDrawer'],
methods: {
open () {
this.$emit('change', true)
},
close () {
this.$emit('change', false)
}
}
}
</script>
<style lang="less" scoped>
.mask{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
transition: all 0.5s;
z-index: 100;
&.open{
display: inline-block;
}
&.close{
display: none;
}
}
.drawer{
position: fixed;
width: 256px;
height: 100%;
transition: all 0.5s;
z-index: 100;
&.open{
left: 0px;
}
&.close{
left: -262px;
}
.sider{
height: 100%;
}
}
</style>
Loading…
Cancel
Save